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

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 倍，如下所示：

但随后我将相同的 window 拖到我的 Retina MacBook 显示屏上，它们突然变回原始大小，如下所示：

我没有对 window 或 window 做任何事情，我只是在两个显示器之间拖动 window。每当 window 在 Thunderbolt 显示器上时，控件会弹回 2x 模式，而当 window 在 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> 元素，同样的事情发生了，所以这不仅限于收音机和复选框输入。

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

Answer 1

您应该尝试调整出现缩放问题的显示器的分辨率。有没有试过关掉双显，直接用本身有缩放问题的显示器看看还会不会？

不过我没发现代码有问题

我刚刚在我的 mac book pro 上查看了您的代码，似乎是正常的。

如果 none 有帮助，您应该尝试在体重秤上使用小数而不是整数。

Answer 2

试试这个

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

Answer 3

尝试使用 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 团队。

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

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

css

google-chrome

safari

webkit

retina-display