レスポンシブ サイズの SVG clipPath を使用して、固定位置の div を画像の背景でマスクしています。Safariで失敗していると指摘されるまで、これはすべて正常に機能していました（Firefox、Chrome、IE、およびOpera）。clipPath数時間後、Safari が SVGを 3 つの div のうちの 1 つにしか適用していないことに気付きました。私はBingでそれをグーグルで検索し、この質問を見つけました。これは本質的に同じことですが、答えはありません。-webkit-transform:translateZ(1px)CSS ハードウェア アクセラレーション ( / )を強制するためのコメント-webkit-transform:translate3d(0, 0, 0)です。
私はそれをしました、そして捕虜！Safariでは完全に機能します...しかし、Chromeでは完全にめちゃくちゃに見えます。再描画が完全に狂ってしまったかのようです (上下にスクロールすると、Chrome での歪んだ途切れ途切れの効果が毎回異なります)。
問題は、Chrome と Safari の両方が WebKit ベースであることです。そのため、ベンダー プレフィックスはここでは役に立たないのではないでしょうか?
参考までに、次のように表示されます(FF のスクリーンショット、現在 Safari でも同じように見えます)。
CSS ハードウェア アクセラレーションを使用した Chrome では、次のように表示されます。
理想的には、a) Chrome でひどい再描画の問題を解決するか、b) clipPathSafari で複数の要素が機能しない場合の別の修正方法を見つける必要があります。