WebKit CSS conversion: scaling does not work on Retina Mac if the scaling factor is greater than 1 for certain HTML elements

Question

Sample script: 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); } 

I have a switch and a checkbox that I apply transform: scale (2) to. On my Thunderbolt display (not the retina) they scale properly to 2x, for example:

But then I drag the same window onto my Retina MacBook screen and they suddenly revert to their original size, for example:

I did not do anything with the window or inside the window, I just dragged the window between the two screens. Whenever a window is on the Thunderbolt display, the controls return to 2x mode, and when the window is on the Retina MacBook display, they return to their original size. How can I scale them on mesh displays? (Using transform: scale (4) does nothing, it's not a retinal display issue requiring a 2x scale factor.)

Note. I tested in Chrome 44 and Safari 8.0.7, and the behavior occurs in both cases, so my WebKit question title is. Interestingly, when using scaling: 200% instead of transform: scale (2) causes Chrome to display the fields in a different style that circumvents this problem, but this does not work in Safari, where it demonstrates the same behavior as described above. I tested this on several Retina MacBook Pros and they all demonstrate this behavior, so this is not a problem local to my machine.

EDIT: I changed the script to include the <button> element and the same thing happens, so this is not limited to radios and checkbox tabs.

EDIT 2: I tested the <img> elements and they scale properly. As a result, I do not think that this is a problem for all elements, only specific ones, and I found that this affects the radio buttons, checkboxes and buttons.

Answer 1

Try CSS 3D transforms instead. For example, instead of transform: scale(2) you can use transform: scale3d(2,2,1) .

This works because using 3D transforms forces Webkit browsers to create a new GPU layer for this element instead of transforming it using other methods. From this article, Paul Lewis and Paul Ireland from the Chrome team:

In Blink and WebKit browsers, a new layer is created for any element that has a CSS transition or animation to opacity, but many developers use translateZ (0) or translate3d (0,0,0) to manually create a layer.

This Chrome Team Tom Wiltzius article has more criteria for what creates a layer and what doesn't. (Warning: this article was written in 2013 and may not be entirely accurate right now.)

This seems like a legitimate WebKit error. I would recommend reporting this to the WebKit or Chrome team.

Answer 2

You should try to adjust the resolution on the monitor that you encountered scaling. Have you tried turning off the dual display and just using a monitor that has a zoom problem to make sure this is still happening?

I don't see a problem with the code though

I just looked at your codes on my mac book program, it seems like this is normal.

If this does not help, try using decimal places on the scale instead of integers.

Answer 3

try it

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