オーバーフローのある要素でサファリのサブピクセルのバグを修正する方法はありますか？

Question

左上角のラベル付きボックスを作成しようとしています。このラベルは、マウスの上にスライドする必要があります。

私はSafariブラウザ（Mac OSのエル・キャピタン）では、このボックスの上に置くと、私は以下のバグを見て：移行が完了するとhttp://newsletters.loginov.biz/1.png

黄色のラベルがOKとなり（クリッピングがよくあります）。

NB！私は、ビューポートの幅が奇数のときにこれが起こることを発見しました。 （ブラウザを段階的にリサイズしてこの問題を見ることができます）。

アイデア？私が知っている

.box { 
 
position: relative; 
 
overflow: hidden; 
 
left: 50%; 
 
margin-left: -100px; 
 
width: 200px; 
 
height: 200px; 
 
background: #212121; 
 
box-shadow: 0 0 8px rgba(0,0,0,.13); 
 
-webkit-transition: box-shadow 250ms; 
 
transition: box-shadow 250ms; 
 
} 
 

 
.box:after { 
 
position: absolute; 
 
z-index: 1; 
 
top: 0; 
 
right: 0; 
 
border-left: 60px solid transparent; 
 
border-top: 120px solid #ffcc32; 
 
content: ''; 
 
-webkit-transform: translate(30px, -60px); 
 
transform: translate(30px, -60px); 
 
-webkit-transition: transform 250ms; 
 
transition: transform 250ms; 
 
} 
 

 
.box:hover { 
 
    box-shadow: 0 0 45px rgba(0,0,0,.35); 
 
} 
 
.box:hover:after { 
 
-webkit-transform: none; 
 
transform: none; 
 
}

<div class="box"> 
 
<img src="http://s.appleinsider.ru/2016/06/macOS-Sierra-Wallpaper-iPhone-Plus-Wallpaper.jpg" alt="test img" /> 
 
</div>

Answer 1

、これはエレガントな解決策ではありませんが、まったく同じ問題で私を助けました。 私のケースでは、行に複数の要素があり、ラッパー要素が中央に置かれたときに問題が再現されました。したがって、ラッパーに奇数の幅があり、ビューポートに奇数の幅がある場合でも、Safariで完全に整列させることはできません（偶数幅でも同じです）。だからあなたのラッパーは反対の折り畳みを持っていなければならなかった。 私のソリューションのJQueryは、クラスの高速追加/削除用です。独自のメソッドを使用できます。

var $wrapper = $('.wrapper'), fixSafariSubpixelDelay; 
function fixSafariSubpixel() { 
    clearTimeout(fixSafariSubpixelDelay); 
    fixSafariSubpixelDelay = setTimeout(function() { 
    if (window.innerWidth % 2 == 0) 
     $wrapper.removeClass('even').addClass('odd'); 
    else 
     $wrapper.removeClass('odd').addClass('even'); 
    }, 100); 
}; 

window.addEventListener('resize', fixSafariSubpixelDelay);