Czy Safari i Safari Safari renderują zaokrąglone krawędzie z błędem i promieniem? - css, safari, mobilne safari, padding, css3

Safari i Mobile Safari wydają się mieć problem z łączeniem promienia, wypełnienia i granic. Działa dobrze w przeglądarce Chrome i Firefox.

<- Oczekiwany

<- Renderowanie Safari

HTML:

<img src="/images/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
}

Przykład: http://jsfiddle.net/ucNwx/2/

Czy to moja wina, czy Safari? Jak to naprawić?

Odpowiedzi:

10 dla odpowiedzi № 1

Mój zakład to błąd Safari: border-radius jest stosowany późno i daje efekt obcinania. Na szczęście, box-shadow jest renderowany poprawnie, więc używajmy go:

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

Prace na Safari 6 na iPadzie i OS X.

---

2 dla odpowiedzi nr 2

Najlepsze rozwiązanie, jakie mogę sobie teraz wyobrazić: http://jsfiddle.net/ucNwx/5/

Używa oblewania div, aby narysować obramowanie, a następnie umieszcza obraz wewnątrz niego. Nadal mam trochę artefaktów na prawym brzegu, ale przypuszczam, że to błąd Safari.

HTML

<div class="border-container">
<img src="/images/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;
}

---