图像剪切父元素的边界半径？ （Safari浏览器）

Question

是什么原因导致图片剪辑父母元素的border-radius？图像和父元素都应用了border-radius: 50%，但它仍然会导致剪辑。

这是我在Safari中遇到的问题：

从我所看到的，它似乎是特定于Safari的问题。有什么输入吗？

body {
  margin: 0;
  padding: 0;
  border: 0;
}

#photo-container {
  box-sizing: border-box;
  padding: 40px 25% 20px;
  line-height: 0;
  margin: 0;
}

#photo-container a {
  border: 2px solid blue;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  padding: 5px;
  display: block;
  box-sizing: border-box;
}

img#photo {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}

<div id="photo-container">
  <a id="#">
    <img id="photo" src="http://freedesignfile.com/upload/2018/02/most-beautiful-scenery-of-nature-Stock-Photo-04.jpg">
  </a>
</div>

Answer 1

最初加载页面时，它会在页面完全加载之前显示轻微的重叠错误，然后在我的Safari中正确加载。

如果您仍然看到问题，我可以提出的唯一建议是将box-sizing: border-box;添加到#photo-container a。

至于它为什么会发生，这就是为什么：

Safari似乎无法正确裁剪图像。因此，即使图像不可见，容器的边框也会被图像覆盖。我测试了几个不同的东西，比如减小图像的大小等，并且在多个阶段都有类似的问题，所以这不太可能是你可以100％考虑的事情。

Answer 2

找到解决方案。将-webkit-backface-visibility: hidden;和-moz-backface-visibility: hidden;应用于img#photo解决了边框裁剪问题。

img#photo {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}