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>元素和它们适当缩放.因此,我不认为这是所有元素的问题,只是特定的元素,我发现它到目前为止影响单选按钮,复选框和按钮.