<img> was cropped 1px on mobile safari
JSBin: https://jsfiddle.net/mnLw83ga/
Whether the image was enlarged or not, the image was cropped 1px from the top. It will return to normal when the phone is in horizontal mode.
code:
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">
Sometimes the clip would appear at the bottom when scaling.
It looked like this:
safari image border radius error
Device Information: iOS 10.3.1 iPhone 6 Can't Duplicate On My iPhone 7
source to share
Cropping in Safari may be related to the version of Safari you are using. In percentage terms, Safari for border-radius
is only supported in 5.1+. I would hate to think that this is the case with your version, however, it is possible. But on my end (Safari 11.0.2) it goes through without cropping.
Safety would be to turn off percentage for fixed border-radius
50px
, since your width and height are fixed.
img {
width: 100px;
height: 100px;
border-radius: 50px;
}
<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">
source to share