WebKit CSS变换：如果某些HTML元素的比例因子大于1,则缩放对Retina Mac不起作用

示例小提琴： 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);
}

我有一个单选按钮和一个复选框,我应用transform：scale(2)to.在我的Thunderbolt(非视网膜)显示器上,它们可以正确缩放到2x,如下所示：

但随后我将同一个窗口拖到我的Retina MacBook显示屏上,然后它们突然变回原始尺寸,如下所示：

我没有对窗户或窗户内做任何事情,我只是在两个显示器之间拖动窗口.每当窗口在Thunderbolt显示屏上时,控件会弹回2x模式,当窗口在Retina MacBook的显示屏上时,它们会弹回到原始大小.如何确保它们在视网膜显示器上扩展？ (使用transform：scale(4)不做任何事情;视网膜显示不需要2倍的比例因子.)

注意：我在Chrome 44和Safari 8.0.7中进行了测试,并且两者都出现了这种情况,因此我的问题是WebKit.有趣的是,使用zoom：200％而不是transform：scale(2)会导致Chrome以不同的方式呈现框以绕过此问题,但这在Safari中不起作用,在Safari中它表现出与上述相同的行为.我已经在多个Retina MacBook Pro上测试了它们,它们都表现出这种行为,因此它不是我的机器本地的问题.

编辑：我修改了小提琴,包括一个< button>元素也是如此,同样的事情发生,所以这不仅限于无线电和复选框输入.

编辑2：我测试了< img>元素和它们适当缩放.因此,我不认为这是所有元素的问题,只是特定的元素,我发现它到目前为止影响单选按钮,复选框和按钮.

解决方法

请尝试使用CSS 3D转换.例如,您可以使用transform：scale3d(2,2,1)代替transform：scale(2).

这是有效的,因为使用3D转换会强制Webkit浏览器为该元素创建新的GPU层,而不是使用其他方法对其进行转换.从this article开始,Chrome团队的Paul Lewis和Paul Irish：

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

Chrome团队的Tom Wiltzius的This article对创建图层的内容和不创建图层的内容有更多标准. (警告：该文章写于2013年,现在可能不完全准确.)

但这听起来像是一个合法的WebKit错误.我建议将其报告给WebKit或Chrome团队.