chrome - Transformaciones WebKit CSS: la escala no funciona en Retina Mac si el factor de escala es mayor que 1 para ciertos elementos HTML

retina display resolution

Question

Fiddle de muestra: http://jsfiddle.net/pmLs1cxv/5/

HTML:

<p>
    <input type="checkbox" class="two" />
    <input type="radio" class="two" />
    <button type="submit" class="two"></button>
</p>
<p>
    <input type="checkbox" />
    <input type="radio" />
    <button type="submit"></button>
</p>

CSS:

.two {
    transform: scale(2);
}

Tengo un botón de radio y una casilla de verificación que aplicar transformar: escala (2) a. En mi pantalla Thunderbolt (no retina), se escalan correctamente a 2x, así:

Pero luego arrastro la misma ventana hacia la pantalla de mi MacBook Retina, y de repente vuelven al tamaño original, así:

No hice nada en la ventana o dentro de la ventana, simplemente arrastré la ventana entre las dos pantallas. Cada vez que la ventana está en la pantalla Thunderbolt, los controles vuelven al modo 2x, y cuando la ventana está en la pantalla de la MacBook Retina, regresan al tamaño original. ¿Cómo me aseguro de que escalen en las pantallas Retina? (El uso de transform: scale (4) no hace nada, no se trata de retina displays que requieren 2 veces el factor de escala).

Nota: Probé en Chrome 44 y Safari 8.0.7 y el comportamiento se produce en ambos, por lo tanto, titulo la pregunta WebKit. Curiosamente, al utilizar el zoom: 200% en lugar de transformar: la escala (2) hace que Chrome represente los cuadros en un estilo diferente que evita este problema, pero eso no funciona en Safari, donde muestra el mismo comportamiento descrito anteriormente. He probado esto en múltiples Retina MacBook Pro y todas muestran este comportamiento, por lo que no es un problema local para mi máquina.

EDITAR: Modifiqué el violín para incluir también un elemento <button> , y ocurre lo mismo, por lo que esto no se limita a las radios y las entradas de la casilla de verificación.

EDIT 2: <img> elementos <img> y escalaron correctamente. Como resultado, no creo que esto sea un problema para todos los elementos, solo específicos, y hasta ahora he visto que afecta los botones de radio, las casillas de verificación y los botones.

Answer 1

Debería intentar ajustar la resolución en el monitor que está teniendo el problema con la escala. ¿Intentó apagar la pantalla doble y simplemente usar el monitor que tiene el problema de escala por sí solo para ver si todavía ocurre?

No veo un problema con el código, aunque

Acabo de ver tus códigos en mi mac book pro, parece ser normal.

Si nada de eso ayuda, debería intentar usar decimales en la escala en lugar de números enteros.

Answer 2

Intenta usar transformaciones CSS 3D en su lugar. Por ejemplo, en lugar de transform: scale(2) puede usar transform: scale3d(2,2,1) .

Esto funciona porque el uso de transformaciones 3D obliga a los navegadores Webkit a crear una nueva capa de GPU para ese elemento en lugar de transformarlo con otros métodos. De este artículo de Paul Lewis y Paul Irish del equipo de Chrome:

En los navegadores Blink y WebKit se crea una nueva capa para cualquier elemento que tenga una transición CSS o animación en opacidad, pero muchos desarrolladores usan translateZ (0) o translate3d (0,0,0) para forzar manualmente la creación de capas.

Este artículo de Tom Wiltzius del equipo de Chrome tiene más criterios sobre qué crea una capa y qué no. (Advertencia: ese artículo fue escrito en 2013 y puede que ahora no sea del todo exacto).

Sin embargo, esto suena como un error legítimo de WebKit. Recomendaría informarlo a los equipos de WebKit o Chrome.

Answer 3

Prueba esto

-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);