文章/答案/技术大牛

发布

社区首页 >问答首页 >Safari's汽车边缘+ translate3d 1 1px出血问题

问Safari's汽车边缘+ translate3d 1 1px出血问题
EN

Stack Overflow用户

提问于 2016-04-24 02:34:22

回答 1查看 245关注 0票数 2

我正在使用w/a幻灯片，它的工作方式类似于这样：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上)，如果您调整浏览器的大小，您将看到1px的移动，并出血的前一个背景。我已经尝试了每一个css技巧，但都没有效果。这似乎是Safari唯一可以复制的bug，我可以确认它已经发生了至少两年。

有什么解决办法吗？

javascript

jquery

html

css

safari

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-24 03:47:02

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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36818691

复制

相似问题

问Safari's汽车边缘+ translate3d 1 1px出血问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Safari's汽车边缘+ translate3d 1 1px出血问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Safari's汽车边缘+ translate3d 1 1px出血问题
EN