Safari、Chrome、FFで青色の背景が表示される

Question

トランジションでCSSアニメーションが表示されるサイドナビゲーションを開閉するボタンがあります。それはChromeとFirefoxで完璧に動作し、種類の、あまりにもSafariで動作しますが、それは次のようになりますので、ボタンはCSSルール上のどこに含まれていないこの青の背景を取得します。

をこのするのではなく、 ：私は解決策を見つけようと背面視認性を含めてきた

：と変換を隠さ：translateZ（0）とさえ変更色をRGBAに変換するが、それらのハックは何もしなかった。

この半分はバグが見られますdeveloped websiteです。

Answer 1

解決策が見つかりました。

私は、このような高さ、幅としてCSSルールを変更したり場合＃NAV-トグラーまたは＃nav-toggler.open要素のSafariのWebインスペクタを使用してを翻訳することを円を気づきました割り当てられた色に再ペイントされます。

transform: translateZ(1px);から＃nav-toggler.openを追加して再描画を強制し、問題を解決しました。

#nav-toggler.open { 
left: 240px; 
transform: translateZ(1); /* added to solve repaint in Safari */ 
-webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
     transition: .5s ease-in-out; 
} 

私は当初、代わりにwidth:50.00001pxを追加しましたが、それだけで0.00001ピクセルのであっても、それは本当に私に邪魔されました。