CSS 전환과 삼성 갤럭시 탭 2

Question

나는 태블릿 용 웹 앱을 만들고 있는데, 스위치처럼 보이도록 divs와 내 체크 박스의 라벨 스타일을 지정했다. (JsFiddle here.는)

내가 탭 2 삼성 갤럭시에 그것을 볼 수있어 나는 그 반대의 경우도 마찬가지 세로에서 가로로 태블릿을 켜거나 때만 상태를 변경하지만 때, 아이 패드 2 & 3에 잘 작동

나는 또한 전환없이, 그리고 여전히 같은 문제를 시도했다.

Javascript없이 원하는 효과를 얻을 수있는 방법이 있습니까?

는 그래서 내가 너무 여기 jsfiddle 링크를 못하게

코드입니다 :

HTML :

<label class="switch" for="test"> 
    <input type="checkbox" id="test"> 
    <div class="track"> 
     <div class="knob"></div> 
    </div> 
</label>​ 

CSS :

label.switch > .track { 
    width: 80px; 
    height: 52px; 
    border-radius: 60px; 
    box-shadow: 0 1px 3px black inset, 0 -1px 1px rgba(255,255,255,0.15); 
    /*border: 5px solid #666;*/ 
    display:inline-block; 
    cursor:pointer; 
    background: #333; 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
    background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
    background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
    transition: background .5s; 
    -webkit-transition: background .5s; 
    -moz-transition: background .5s; 
    -o-transition: background .5s; 
    -ms-transition: background .5s; 
} 

label.switch > .track > .knob { 
    height: 54px; 
    width: 54px; 
    border-radius: 50px; 
    margin-top:-1px; 
    box-shadow: 0 2px 3px black, 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 5px rgba(237,237,237,1) inset; 
    transition: margin-left .25s; 
    -webkit-transition: margin-left .25s; 
    -moz-transition: margin-left .25s; 
    -o-transition: margin-left .25s; 
    -ms-transition: margin-left .25s; 
    background: rgb(191,191,191); 
    background: -moz-linear-gradient(top, rgba(191,191,191,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,191,191,1)), color-stop(53%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1))); 
    background: -webkit-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); 
    background: -o-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); 
    background: -ms-linear-gradient(top, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); 
    background: linear-gradient(to bottom, rgba(191,191,191,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%); 
} 


label.switch > input { 
    display:none; 
} 

label.switch > input:checked ~ .track { 
    background: #D96200 

} 

label.switch > input:checked ~ .track > .knob { 
    margin-left:26px; 
} 
​ 

Answer 1

안드로이드 태블릿 (적어도 삼성 Galaxy Tab 2)는 Chrome의 이전 버전을 기본 브라우저로 제공합니다.

이 브라우저는 general sibling selector (~)을 인식하지 못합니다. 이것이 애니메이션이 작동하지 않는 이유입니다.

해결 방법은 adjacent sibling selector (+)에 대한 일반 형제 선택기의 모든 항목을 변경하는 것입니다.