将CSS缩放变换与背景位置相结合会产生FF和FF的差距。的Safari

Question

当你将一个div上的scale()转换与相邻的inline-block子项（它们之间没有文本元素）组合在一起时，如下所示，你希望整个父div可以缩放，就好像这两个元素是之一。

<div class="container">
    <div class="img-1"></div>
    <div class="img-2"></div>
</div>

使用以下CSS：

.container {
      transform: scale(1.5);
      -webkit-transform: scale(1.5);
      line-height: 0;
      font-size: 0;
}

.img-1, .img-2 {
    width: 250px;
    height: 250px;
    display: inline-block;
    /* This is contrived. The children don't need the same bg */
    background: url('http://placekitten.com/g/250/250');
}

在所有最近支持CSS3转换的浏览器中都会正确发生这种情况。

但是，添加和调整background-position或.img-1的{​​{1}}会在Firefox和Safari中产生不一致且偶尔无法重现的视觉故障（请参阅下文），但在Chrome和Internet Explorer中正确呈现10＆amp; 11（喘气）。

.img-2

我能描述毛刺的最好方法是在图像之间出现不透明（或有时是半透明）的间隙。有趣的是，故障只发生在OSX 10.10.3上（可能更早），但不发生在Windows 7上。

下面的屏幕截图是OSX 10.10.3和Windows 7.我添加了红色背景，因此差距更明显。为自己尝试：http://jsbin.com/dumekayiha/1/edit。

Chrome 45.0.2421.0 OSX

纠正行为

Chrome 43.0.2357.81 Windows

纠正行为

Firefox 38.0.5 OSX

行为不正确

Firefox 38.0.5 Windows

纠正行为

Firefox Developer Edition 40.0a2（2015-06-02）OSX

行为不正确

Firefox Developer Edition 40.0a2（2015-06-02）Windows

纠正行为

IE 10 Windows

纠正行为

IE 11 Windows

纠正行为

Safari 8.0.6（10600.6.3）OSX

行为不正确

在OSX 10.10.3上的FF和FF Dev版本中，我有时可以通过调整浏览器窗口大小来消除效果。在某些（看似随机的）维度上，差距消失了。另外在OSX上的FF（不是Dev版本）中，如果我在检查器中添加.img-1, img-2 { background: url('http://placekitten.com/g/250/250') -1px -1px; } 然后垃圾邮件，请单击启用/禁用属性复选框，我可以让间隙消失。此外，有时使用transform-style: preserve-3d;，background，background-image和background-repeat的奇怪组合可以在FF和FF Developer Edition中消除差距，但我发现它不可靠，不一致和不可重复（可能修改样式触发了垃圾邮件background-position所做的相同重绘？）。

如果完全相关，则Windows屏幕截图来自在Virutalbox上运行的Windows 7。但是，我有一个Windows的朋友拉起了jsbin，他确认我的Windows屏幕截图反映了他所看到的内容。此外，（而不是由于市场份额低而完全相关）Windows上的Safari 5遇到与OSX上的Safari相同的问题。

当我让间隙消失时，图像都不会向左或向右跳跃。相反，透明的1px线成为右图像最左侧的1px线。这种行为以及浏览器和操作系统之间的差异让我相信这只是一个Firefox和Safari Bug。

我是否认为这是一个错误？ （我已准备好在这种情况下提交的错误报告）。如果是这样，我是否可以使用CSS hack来可靠地防止这种故障？

编辑：进一步的调查显示只有当两个偏移值都是奇数时才会出现间隙（注意我正在调整div的大小以便transform-style）。