Safariの自動マージン+ translate3d 1pxのは問題

ブリード私はこれに似た働きスライドショー/ wが働いています：Safariでは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>

（OS X上）、あなたのブラウザのサイズを変更する場合は、1ピクセルのシフトが表示されます前の背景のにじみ。私はすべてのCSSトリックを無駄にしようとしました。それは複製可能なSafariの唯一のバグだと思われ、私はそれが少なくとも2年間起こっていることを確認することができます。

回避策はありますか？

出典

2016-04-24 HDevejian

currentColorレスキュー

@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セットはかなり修正規模を作り、現在のスライドの色が何であれ前提としています。私はこのサファリのみのCSSがどのように醜いの意識です。

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

出典

2016-04-24 03:47:02

左側が働いていたように見えます、ありがとうございました！しかし、プロジェクト/スライドショーの幅が1ピクセル小さくなっていて、右側に青色が表示されていました。私はあなたの方法を使って1pxをカバーしました（左にスワップ：-1px、右に1px、ボーダー右に1pxを追加しました）。Appleにバグを提出しました。これが固定されることを期待してください – HDevejian

もう片面をカバーするために '：after {}'を使ってみてください。 –

Safariの自動マージン+ translate3d 1pxのは問題

答えて

関連する問題