jquery가 작동하지 않는 ipad/iphone CSS 전환

Question

링크를 클릭하면 패널이 슬라이드되는 숨겨진 패널이 있습니다.이 패널은 모든 데스크톱 웹 브라우저에서 정상적으로 작동합니다. 그러나 ipad와 iphone에서 css 애니메이션을 트리거하는 링크를 클릭하면 패널에 애니메이션 슬라이드가 표시됩니다. 그러나 닫을 때이 시점에서 전환이 작동하므로 전환을 보면서 패널을 열고 닫을 수 있습니다. 패널의 첫 번째 방아쇠가 부러 질 것 같습니다.

여기 내 코드는 JS fiddle입니다.

그리고 여기 내 코드입니다 :

.workIndvWrapper { 
display: none; 
z-index:9999; 
position: fixed; 
top: 0; 
right: 0; 
bottom: 0; 
width: 75%; 
background-color: #ff0000; 
overflow-y: auto; 
-webkit-box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.05); 
-moz-box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.05); 
box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.05); 
-webkit-transition: .4s -webkit-transform ease-in-out; 
-moz-transition: .4s -moz-transform ease-in-out; 
transition: .4s transform ease-in-out; 
-webkit-transform: translateX(100%); 
-moz-transform: translateX(100%); 
transform: translateX(100%); 
-webkit-overflow-scrolling: touch; } 
.showPanel { 
-webkit-transform: translateX(0px); 
-moz-transform: translateX(0px); 
transform: translateX(0px); 
-webkit-overflow-scrolling: touch;} 



$('#sauceThumb').click(function() { 
    if($('#sauceDet').show()) // don't do anything if panel is already being shown 
    {  
     $('#cover').fadeIn(200); 
     $('#mainContent').addClass('blur'); 
     $('#sauceDet').addClass('showPanel').show(); 
     $('.blankOut').addClass('show'); 

    }  
}); 


$('.close, #cover').click(function() 
{ 

    $('#sauceDet, #rodDet, #portDet ').removeClass('showPanel'); 
    $('#mainContent').removeClass('blur'); 
    $('#cover').fadeOut(200); 
    $('.blankOut').removeClass('show'); 
}); 

Answer 1

그냥 .workIndvWrapper CSS 요소에 display: none;을 제거해야합니다! (나를 위해 일하는 JS 피들)