WebKit で Border-Radius に画像が表示されない

すべての接頭辞と標準構文を使用して #screen 要素に border-radius スタイルを適用しているにもかかわらず、この要素は Google Chrome では変更されませんが、Firefox および Internet Explorer 9 では期待どおりに表示されます。この問題は、Chrome による画像の境界線のトリミング処理のバグが原因で発生します。

Chrome のバグを解決するための回避策:

この問題を解決するには、次の回避策を実装してください:

.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}

この手法は要素の視点を変更し、レンダリング エンジンが正しく動作するように強制します。不透明度を 0.99.