ipad / iphone transición css con jquery no funciona

Tengo un panel oculto que onclick en un enlace, el panel se desliza. El panel está bien en todos los browseres web de escritorio. Sin embargo, en el ipad y el iPhone cuando hace clic en el enlace, para activar la animation css, el panel solo aparece sin una diapositiva en la animation. Pero luego, cuando lo cierra, la transición funciona desde este punto, lo que le permite abrir y cerrar el panel al ver la transición. Parece que se rompió en el primer disparador del panel.

Aquí hay un violín JS de mi código.

Y aquí está mi código:

.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'); }); 

solo tiene que quitar la display: none; en el elemento .workIndvWrapper CSS! (Funciona para mí en JS violín)