ios - 在移动版 safari 上被裁掉了 1px

Question

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

无论缩放与否，图像顶部都被裁剪了 1px。当手机处于水平模式时，它将恢复正常。

代码:

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

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

有时在缩放时剪辑发生在底部。

看起来像这样:

safari 图像边框半径错误

设备信息:iOS 10.3.1 iPhone 6无法在我的 iPhone 7 上重复出现

Answer 1

Safari 中的剪辑可能是由于您使用的 Safari 版本所致。在 Safari 中，border-radius 的百分比值仅在 5.1+ 中受支持。我不愿意认为您的版本就是这种情况，但是，这是可能的。但在我这边(Safari 11.0.2)它没有剪裁。

安全的做法是将固定 border-radius 的百分比切换为 50px，因为您的宽度和高度是固定的。

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

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