图像剪裁父元素的边界半径？（苹果浏览器）

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;
}

图像剪裁父元素的边界半径？（苹果浏览器）

Image Clipping Parent Element's Border-Radius? (Safari)

html

css

border

clipping

图像剪裁父元素的边界半径？ （苹果浏览器）

Image Clipping Parent Element's Border-Radius? (Safari)

html

css

border

clipping

图像剪裁父元素的边界半径？（苹果浏览器）