css - para - webkit-overflow-scrolling
Cómo forzar la reproducción después de una transformación de WebKit 3D en Safari (6)
Estoy usando transformaciones CSS 3D para ampliar un div, por ejemplo:
-webkit-transform: scale3d(2,2,1);
La escala en sí funciona bien en cualquier navegador WebKit. Sin embargo, al usar esto en Safari (móvil o Windows), el contenido del div no se vuelve a representar. El resultado es que el contenido se vuelve borroso después de escalar.
Este efecto solo ocurre cuando se usan transformaciones 3D. Todo funciona bien cuando se usa
-webkit-transform: scale(2); .
Para explotar la aceleración de hardware en iPhone / iPad, sería bueno usar las transformaciones 3D.
¿Alguien sabe cómo decirle a Safari que vuelva a renderizar un div con la nueva escala?
Descubrí que al intentar forzar un redibujado de un div en un safari por otras razones (recalcular el desbordamiento de texto al pasar el cursor), eso es simple:
selector {
/* your rules here */
}
selector:hover {
/* your rules here */
}
selector:hover:after {
content:"";
}
Hice algo sobre el tema que cambia el relleno para acomodar algunos botones, pero en safari / chorme no vuelve a calcular el contenido correctamente, agregando: después de pseudoclass hizo el truco.
Tenga en cuenta que no encontré esto en ninguna parte de Internet, lo descubrí cuando jugueteaba.
Estoy tratando de hacer lo mismo. Creo que lo que está sucediendo aquí es que Safari solo está escalando píxeles. Es decir, realiza toda la representación del navegador "normal" y luego escala los píxeles del resultado.
Ejemplo : coloque una imagen de calidad relativamente alta (por ejemplo, 1000x1000 píxeles) en una pequeña división (200x200 píxeles) y configure la imagen a 100% de ancho y alto. Cuando transformes en 3D el div a escala 5 veces, el resultado será borroso en Safari y nítido en Chrome. Use una transformación 2D y la imagen aparecerá nítida en ambos.
Una solución es convertir a una transformación 2D después de que haya terminado con el 3D. Sin embargo, he descubierto que hay un ligero retraso en la conversión entre transformaciones, por lo que esto no me funciona demasiado bien.
Hmmm ... Tengo el mismo problema al intentar escalar imágenes de google maps (hidpi) con Chrome 53.
La única solución que he encontrado hasta ahora es ocultar la imagen (o un div que contiene las imágenes) y luego mostrarla de nuevo. Puede estar con opacidad = 0 o visibilidad = oculta, pero en realidad tiene que ser invisible durante al menos un cuadro o dos.
Esto, por cierto, ni siquiera es una transformación 3d. Sólo cosas 2D.
Hmmm ... Tengo el mismo problema al intentar escalar imágenes de google maps (hidpi) con Chrome 53.
Una solución es ocultar (opacidad, visibilidad) la imagen durante unos pocos cuadros (o un contenedor que envuelve la imagen / imágenes / lo que sea) ... la mejor solución que encontré en otra publicación en SO fue esta (publicada en el que contiene DIV):
e.style.transform = ''translateZ(0) scale(1.0, 1.0)''
Por cierto, mis cosas eran solo cosas ordinarias en 2d, el translateZ parece hacer la diferencia, aunque nunca toqué nada en 3D.
La razón por la que el texto es borroso es porque Webkit trata el texto como una imagen, supongo que es el precio de ser hardware acelerado. Supongo que está utilizando transiciones o fotogramas clave de animación en su interfaz de usuario, de lo contrario, las mejoras de rendimiento son insignificantes y debería cambiar a transformaciones no 3d.
Tu también puedes:
• Agregue un eventlistener para la transición y luego reemplace la transformación 3d para una transformación estándar, como ...
element.addEventListener("transitionend", function() {
element.style.webkitTransform = ''scale(2,2)''
},false);
• Dado que Webkit trata las cosas como una imagen, es mejor comenzar a lo grande y reducir la escala. Entonces, escriba su css en su "estado final" y redúzcalo para su estado normal ...
#div {
width: 200px; /*double of what you really need*/
height: 200px; /*double of what you really need*/
webkit-transform: scale3d(0.5, 0.5, 1);
}
#div:hover {
webkit-transform: scale3d(1, 1, 1);
}
Y obtienes un texto crujiente al pasar el ratón. Hice una demostración aquí (funciona también en iOS):
No pude encontrar una solución para hacer zoom-ins no borrosos en Safari (escritorio v7.0.2 y el incluido en iOS 6.1.3 y 7.0.6) pero lo hice en algún momento, note que recibí un png cuando Establecí la escala en 5. No sé por qué, ya que esa versión de mi código se pierde en todos los cambios posteriores que realicé. Todos los demás factores de escala fueron borrosos.
Como el iPhone y el iPad son dispositivos de destino para este proyecto, terminé abandonando la transformación de escala y animando la altura de la imagen. Me decepciona que el equipo de Safari haya decidido implementar transformaciones de manera que se conviertan en una opción inviable en muchos casos.