Safari 的自动边距 + translate3d 1px 出血问题答案

【问题标题】：Safari's auto margin + translate3d 1px bleed issueSafari 的自动边距 + translate3d 1px 出血问题
【发布时间】：2016-04-24 11:47:02
【问题描述】：

我正在使用与此类似的幻灯片：https://jsfiddle.net/trbwxyso/

<!doctype HTML>
<html>
<head>
    <title></title>
    <style>
        * { margin: 0; padding: 0; }
        body { background: #000; }
        #wrapper { margin: 0 auto; width: 500px; }
        #project_ctr { position: relative; width: 1500px; height: 576px; display: block; background: #000; overflow: hidden; }
        .project { position: absolute; width: 500px; height: 576px; display: block; }
        .ease { transition: 750ms ease all; }
    </style>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="project_ctr">
            <div class="project" style="background: #f00; left: 0;">
            </div>
            <div class="project" style="background: #fff; left: 500px;">
            </div>
            <div class="project" style="background: #00f; left: 1000px;">
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            setTimeout(function() {
                $('.project').addClass('ease').css({
                    'transform': 'translate3d(-500px, 0, 0)'
                });
                setTimeout(function() {
                    $('.project').addClass('ease').css({
                        'transform': 'translate3d(-1000px, 0, 0)'
                    });
                }, 2000);
            }, 2000);
        });
    </script>
</body>
</html>

在 Safari（在 OS X 上）中，如果您调整浏览器大小，您将看到 1 像素的偏移和先前背景的渗色。我已经尝试了每一个 CSS 技巧都无济于事。这似乎是一个 Safari 唯一可复制的错误，我可以确认它已经发生了至少两年。

有什么解决方法吗？

【问题讨论】：

标签： javascript jquery html css safari

【解决方案1】：

currentColor 来救援。我知道这个仅限 Safari 的 CSS 有多丑：

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .project:before {
      content: "";
      display: block;
      position: absolute;
      left: -1px;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 1px;
      z-index: 999;
      background: currentColor;
    }
  }
}

这里，设置在背景上的值 currentColor 假定当前幻灯片颜色是什么，从而使修复比例非常好。

https://jsfiddle.net/dgt4uqc4/2/

【讨论】：

看起来左侧工作正常，谢谢！然而，我确实注意到项目/幻灯片的宽度现在小了一个像素，并且在右侧显示为蓝色。我使用您的方法覆盖了 1px（将左：-1px 与右 -1px 交换，还添加了一个右边框：1px）我已经向 Apple 提交了一个错误。希望这可以得到解决
您可能想尝试使用:after { } 覆盖另一边。