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

Question

示例小提琴: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>元素并且它们正确地缩放.因此,我不认为这是所有元素的问题,只是特定的元素,并且我发现它到目前为止影响单选按钮,复选框和按钮.

Answer 1

尝试使用 CSS 3D 变换。例如，transform: scale(2)您可以使用transform: scale3d(2,2,1).

这是可行的，因为使用 3D 变换会强制 Webkit 浏览器为该元素创建一个新的 GPU 层，而不是使用其他方法对其进行变换。来自Chrome 团队的 Paul Lewis 和 Paul Irish 的这篇文章：

在 Blink 和 WebKit 浏览器中，会为任何具有 CSS 过渡或不透明度动画的元素创建一个新图层，但许多开发人员使用 translateZ(0) 或 translate3d(0,0,0) 手动强制创建图层。

Chrome 团队的 Tom Wiltzius 撰写的这篇文章对什么创建层和什么不创建层提供了更多标准。（警告：该文章写于 2013 年，现在可能不完全准确。）

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