<img> wurde von 1px auf mobile Safari abgeschnitten

Question

JSBin: https://jsfiddle.net/mnLw83ga/

Ob gezoomt wurde oder nicht, das Bild von 1px auf der Oberseite abgeschnitten wurde. Es wird normal zurückkehren, wenn sich das Telefon im horizontalen Modus befand.

Code:

img { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
}

<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">

Manchmal passiert der Clip auf der Unterseite, beim Zoomen.

Es sah wie folgt aus:

Safari Bild Bug border-radius

Device Info: iOS 10.3.1 iPhone 6 nicht auf meinem iPhone 7

Answer 1

Der Ausschnitt in Safari DAUER kann, kann aufgrund der Version von Safari, die Sie verwenden. In Safari werden Prozentwerte für border-radius nur in 5.1+ unterstützt. Ich hasse es zu glauben, dass das bei deiner Version der Fall ist, aber es ist möglich. Aber an meinem Ende (Safari 11.0.2) kommt es ohne Clipping durch.

Die Sicherheit wäre, den Prozentsatz für eine feste border-radius von 50px zu wechseln, da Ihre Breite und Höhe fest sind.

img { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50px; 
 
}

<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">