Hola a todos, estoy realizando una versión para tablet de una web. Es una versión responsiva de tablet pero sólo aparecerá si se accede desde una tablet ya que controlo el user-agent para añadir una class especifica de tablet.
El caso es que quiero convertir el menú que tengo es un menú desplegable que al clicar sobre el icono de "hamburguer" aparece el menu desde la izquierda desplazando el contenido de la página hacia la derecha.
Hasta aquí todo bien, he conseguido crear el efecto con transitions de css3. Lo he probado desde los navegadores desktop como chrome y firefox y va genial, la animación va fluida y no pega saltos, pero al probarlo desde mi ipad 3 retina con IOs8 al desplegar ese menú no se muestra fluido, va pegando como saltos y no realiza una animación bonita, más bien parece que le cuesta mover el contenido.
¿Sabéis si existe alguna limitación en cuanto a estas animaciones? Será que es mucho contenido el que tiene que mover? Ya que por un lado mueve el menú de izquierda a derecha y a su vez mueve el contenido de toda la pagina de izquierda a derecha.
Os pongo el código css de las animaciones por si os aclara algo:
Código HTML:
/** MENU **/
#nav_main{
width:300px;
left:-300px;
overflow-x:hidden;
position:fixed;
top:0;
-webkit-transition: left 0.4s ease-out 0s;
transition: left 0.4 ease-out 0s;
}
#nav_main.openTablet{
left:0;
}
/** CONTENIDO **/
#page{
transition:margin-left 0.4s ease-out 0s;
-webkit-transition: margin-left 0.4s ease-out 0s;
margin-left:0;
}
#page.moveRightWrapper{
margin-left:300px;
}
Mi única intención es que el contenido hagas las animaciones de forma fluida como en los navegadores desktop.
Muchas gracias por adelantado.