Question

我正在使用与此类似的幻灯片演示：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上）如果您调整浏览器的大小，您将看到1px的移位和先前背景的流血。我试过每一个css技巧都无济于事。它似乎只是一个Safari可以复制的bug，我可以确认它已经发生了至少两年。

有没有解决方法？

Answer 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/

Safari的自动保证金+ translate3d 1px出血问题

1 个答案: