Problema de escalabilidad con -webkit-transform con safari móvil en el iPad

En la página HTML a continuación, estoy escalando un bloque con un -webkit-transform. La transformación escala el bloque desde su tamaño inicial hasta su tamaño doble.Problema de escalabilidad con -webkit-transform con safari móvil en el iPad

Esto funciona como se esperaba con Safari y Chrome en OSX.

Pero, en el iPad (tanto el simulador como el dispositivo), la escala comienza desde un punto único en lugar del tamaño original de la imagen.

Como puede ver en el ejemplo, he configurado la metaetiqueta viewport, pero no hace nada.

¿Alguien puede confirmar esto como un error y hay alguna solución?

<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" /> 

<style type="text/css"> 

#block { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 400px; 
    -webkit-transition: -webkit-transform 3s ease-out; 
    background-color: blue; 
    } 

.zoom { 
    -webkit-transform: scale(2); 
} 
</style> 
</head> 

<body> 
    <div id="block" onclick="className='zoom';">The Block</div> 
</body> 
</html>

Fuente

2010-09-17 andersjanmyr

Pude resolver el problema por mi cuenta.

La solución es simple: sólo asegúrese de que el elemento se escala a su tamaño original, para empezar:

-webkit-transform: scale(1);

Hay un truco para ella, sin embargo. Si, como yo a continuación, agregar una clase a un elemento seleccionado por #id, la #id tiene mayor prioridad que la clase y no se mostrará a menos que usted le dice al navegador que es importante

-webkit-transform: scale(2) !important;

Una alternativa La forma de resolver esto es no seleccionar el elemento por #id sino por clase (.block) o por elemento (div). Cualquier cosa con menor prioridad que una identificación.

Solución sigue:

<style type="text/css"> 

#block { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 400px; 
    -webkit-transition: -webkit-transform 3s ease-out; 
    background-color: blue; 
    -webkit-transform: scale(1); 
    } 

.zoom { 
    -webkit-transform: scale(2) !important; 
} 
</style> 
</head> 

<body> 
    <div id="block" onclick="className='zoom';">The Block</div> 
</body> 
</html>

Fuente

2010-09-20 09:01:55 andersjanmyr

Esto hizo una gran diferencia, simplemente agregando la escala (1), ¡gracias señor! –

Justo lo que estaba buscando. Muchas gracias. – mapr

para mí la adición de la escala 1 no fue la solución, pero mi estado de inicio y final tenía una transformación sin -webkit frente a él. Entonces tu publicación me ayudó a resolver esto. – Mattijs

me encontré con esta pregunta muy tarde. La solución fue sin usar important, y cambiando la forma de seleccionar un elemento. Esto se debe a que el selector de ID es más cercano y poderoso que el selector de clase.

#block.zoom { 
    -webkit-transform: scale(2); 
}

Fuente

2017-03-10 19:03:43

Problema de escalabilidad con -webkit-transform con safari móvil en el iPad

Respuesta

Cuestiones relacionadas