Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema Animaciones lentas en iPad

Estas en el tema de Problema Animaciones lentas en iPad en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/11/2014, 05:38
 
Fecha de Ingreso: octubre-2009
Mensajes: 22
Antigüedad: 14 años, 5 meses
Puntos: 0
Pregunta Problema Animaciones lentas en iPad

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.
  #2 (permalink)  
Antiguo 22/11/2014, 07:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema Animaciones lentas en iPad

Prueba a forzar la aceleración de hardware en ese elemento:

Código CSS:
Ver original
  1. #nav_main {
  2.   transform: translate3d(0,0,0);
  3. }
__________________
(:
  #3 (permalink)  
Antiguo 23/11/2014, 06:18
 
Fecha de Ingreso: octubre-2009
Mensajes: 22
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Problema Animaciones lentas en iPad

Muchas gracias! con eso me ha servido perfectamente.

Etiquetas: ipad, página, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:32.