Accordéon ne fonctionnant pas sur Chrome Mobile

Question

J'ai un accordéon purement css qui fonctionne sur le chrome de bureau et de safari mobile, mais pas le navigateur chrome mobile. Le css et un lien jsfiddle sont ci-dessous. Qu'est-ce que je rate?

https://jsfiddle.net/BeverlyLeu/0cgf3ejt/1/

.transition, .p-accordion, .ul-accordion .li-accordion i:before, .ul- 

accordion .li-accordion i:after { 
} 
.flipIn, .h1-accordion, .ul-accordion .li-accordion { 
} 
.no-select, .h2-accordion { 
    -webkit-tap-highlight-color: transparent; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

.h1-accordion, .h2-accordion { 
    color: #468847; 
} 
.h1-accordion { 
    text-transform: uppercase; 
    font-size: 36px; 
    line-height: 42px; 
    letter-spacing: 3px; 
    font-weight: 100; 
} 
.h2-accordion { 
    font-size: 26px; 
    line-height: 34px; 
    font-weight: 300; 
    /* letter-spacing: 1px;*/ 
    display: block; 
    background-color: #fefffa; 
    margin: 0; 
    cursor: pointer; 
} 
.p-accordion{ 
    color: rgba(48, 69, 92, 0.8); 
    font-size: 17px; 
    line-height: 26px; 
    letter-spacing: 1px; 
    position: relative; 
    overflow: hidden; 
    opacity: 1; 
    transform: translate(0, 0); 
    margin-top: 14px; 
    z-index: 2; 
} 
.ul-accordion { 
    list-style: none; 
    perspective: 900; 
    padding: 0; 
    margin: 0; 
} 
.ul-accordion .li-accordion { 
    position: relative; 
    padding: 0; 
    margin: 0; 
    padding-bottom: 4px; 
    padding-top: 18px; 
    border-top: 1px dotted #dce7eb; 
} 
.ul-accordion .li-accordion:nth-of-type(1) { 
    animation-delay: 0.5s; 
} 
.ul-accordion .li-accordion:nth-of-type(2) { 
    animation-delay: 0.75s; 
} 
.ul-accordion .li-accordion:nth-of-type(3) { 
    animation-delay: 1s; 
} 
.ul-accordion .li-accordion:last-of-type { 
    padding-bottom: 0; 
} 
.ul-accordion .li-accordion i { 
    position: absolute; 
    /*transform: translate(-6px, 0);*/ 
    margin-top: 16px; 
    right: 0; 
} 
.ul-accordion .li-accordion i:before, .ul-accordion .li-accordion i:after { 
    content:""; 
    position: absolute; 
    background-color: #51a351; 
    width: 3px; 
    height: 9px; 
} 
.ul-accordion .li-accordion i:before { 
    transform: translate(-2px, 0) rotate(45deg); 
} 
.ul-accordion .li-accordion i:after { 
    transform: translate(2px, 0) rotate(-45deg); 
} 
.ul-accordion .li-accordion input[type=checkbox] { 
    position: absolute; 
    cursor: pointer; 
    width: 100%; 
    height: 100%; 
    min-width: 100%; 
    min-height: 100%; 
    z-index: 1; 
    opacity: 0; 
} 
.ul-accordion .li-accordion input[type=checkbox]:checked ~ .p-accordion{ 
    margin-top: 0; 
    max-height: 0; 
    opacity: 0; 
    transform: translate(0, 50%); 
} 
.ul-accordion .li-accordion input[type=checkbox]:checked ~ i:before { 
    transform: translate(2px, 0) rotate(45deg); 
} 
.ul-accordion .li-accordion input[type=checkbox]:checked ~ i:after { 
    transform: translate(-2px, 0) rotate(-45deg); 
} 
@keyframes flipdown { 
    0% { 
     opacity: 0; 
     transform-origin: to.p-accordioncenter; 
     transform: rotateX(-90deg); 
    } 
    5% { 
     opacity: 1; 
    } 
    80% { 
     transform: rotateX(8deg); 
    } 
    83% { 
     transform: rotateX(6deg); 
    } 
    92% { 
     transform: rotateX(-3deg); 
    } 
    100% { 
     transform-origin: to.p-accordioncenter; 
     transform: rotateX(0deg); 
    } 
} 

Answer 1

Essayez de changer tous les sélecteurs frères et soeurs sur :checked du général à proximité. Donc :checked + au lieu de :checked ~.