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>
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