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

我的工作瓦特/的作品与此类似幻灯片：https://jsfiddle.net/trbwxyso/Safari的自动保证金+ translate3d 1px的出血问题

<!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浏览器唯一的错误，我可以证实它已经发生了至少两年。

是否有任何解决方法？

来源

2016-04-24 HDevejian

currentColor来救援。我知道这个野生动物园仅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/

来源

2016-04-24 03:47:02

看起来像左侧工作，谢谢！但我注意到项目/幻灯片放映的宽度现在变小了一个像素，并在右侧显示为蓝色。我用你的方法覆盖了1px（交换左边：-1px右边-1px，并且还添加了边框右边：1px）我已经向Apple提交了一个错误。希望这可以得到修复 – HDevejian

您可能想尝试使用'：after {}'来覆盖另一端。 –

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

回答

相关问题