css - WebKit CSS 转换 : Scaling doesn't work on Retina Mac if the scale factor is greater than 1 for certain HTML elements

Question

示例 fiddle :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) 的复选框。在我的 Thunderbolt(非 Retina)显示器上，它们可以正确缩放到 2 倍，如下所示:

但随后我将同一个窗口拖到我的 Retina MacBook 显示屏上，它们突然变回原始大小，如下所示:

我没有对窗口或窗口内部做任何事情，我只是在两个显示器之间拖动窗口。每当窗口在 Thunderbolt 显示器上时，控件会弹回 2x 模式，而当窗口在 Retina MacBook 显示器上时，它们会弹回原始大小。我如何确保它们在 Retina 显示器上缩放？ (使用 transform: scale(4) 不会做任何事情；这不是视网膜显示器需要 2 倍比例因子的问题。)

注意:我在 Chrome 44 和 Safari 8.0.7 中进行了测试，并且在两者中都出现了这种行为，因此我将问题命名为 WebKit。有趣的是，使用 zoom: 200% 而不是 transform: scale(2) 会导致 Chrome 以不同的样式呈现框，从而绕过此问题，但这在 Safari 中不起作用，它表现出与上述相同的行为。我已经在多台 Retina MacBook Pro 上对此进行了测试，它们都表现出这种行为，因此这不是我机器的本地问题。

编辑: 我修改了 fiddle 以包含 <button>元素也是如此，同样的事情也会发生，所以这不仅限于 radio 和复选框输入。

编辑 2: 我测试了 <img>元素，它们可以正确缩放。因此，我认为这不是所有元素的问题，只是特定元素的问题，而且到目前为止，我发现它会影响单选按钮、复选框和按钮。

Answer 1

尝试改用 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,0) to manually force layer creation.

This article Chrome 团队的 Tom Wiltzius 对什么创建层和什么不创建层有更多的标准。 (警告:那篇文章写于 2013 年，现在可能并不完全准确。)

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