safari - Safari と Mobile Safari は、半径とパディングを使用して丸みを帯びた境界線を正しくレンダリングしませんか?

Question

Safari と Mobile Safari では、border radius、padding、border を組み合わせると問題が発生するようです。Chrome と Firefox で正常に動作します。

<-- 期待される

<-- Safari レンダリング

HTML:

<img src="http://lorempixel.com/200/200/animals/3/" />

CSS:

img {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 500px;
    -moz-border-radius:    500px;
    border-radius:         500px;
    padding: 3px;
    border: 1px solid #999;
    margin: 10px
}

例: http://jsfiddle.net/ucNwx/2/

それは私のせいですか、それともサファリですか？どうすれば修正できますか？

Answer 1

私の賭けは Safari のバグです:border-radius遅く適用され、クリッピング効果が生成されます。幸いなことに、box-shadow正しくレンダリングされるので、使用してみましょう。

border-radius: 50%;
box-shadow:
  0 0 0 3px white,
  0 0 0 4px #999;

iPadおよび OS X の Safari 6 で動作します。

Answer 2

私が今考えることができる最良の解決策：http：//jsfiddle.net/ucNwx/5/

ラッパーdivを使用して境界線を描画し、その中に画像を配置します。まだ右端にいくつかのアーティファクトがありますが、それはSafariのバグだと思います。

HTML

<div class="border-container">
    <img src="http://lorempixel.com/200/200/animals/3/" />
</div>

CSS

.border-container {
    width: 206px;
    height: 206px;
    -webkit-border-radius: 50%;
    -moz-border-radius:    50%;
    border-radius:         50%;
    border: 1px solid #999;
    margin: 10px
}

img {
    -webkit-border-radius: 50%;
    -moz-border-radius:    50%;
    border-radius:         50%;
    width: 200px;
    height: 200px;
    margin: 3px;
}