[英]Image Clipping Parent Element's Border-Radius? (Safari)
What causes an image to clip a parenting element's border-radius
? 是什么导致图像裁剪育儿元素的
border-radius
? Both the image and the parent element have a border-radius: 50%
applied, but it still causes the clipping to occur. 图像和父元素都具有
border-radius: 50%
应用border-radius: 50%
,但仍会导致发生裁剪。
This is the issue I am facing in Safari: 这是我在Safari中面临的问题:
It seems to be a Safari-specific issue, from what I can see. 从我看来,这似乎是Safari特有的问题。 Any input?
有输入吗?
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>
When initially loading the page, it displays that slight overlap error until the page is fully loaded, and then it's loading correctly in safari for me. 最初加载页面时,它会显示轻微的重叠错误,直到页面完全加载为止,然后对我来说它已正确地在safari中加载。
The only suggestion I can make, if you're still seeing the issue, is to add box-sizing: border-box;
如果您仍然遇到问题,我只能提出的建议是添加
box-sizing: border-box;
to #photo-container a
as well. 以及
#photo-container a
。
As far as why it's happening, This is why: 至于为什么发生,这就是为什么:
It seems Safari has trouble cropping the image correctly. 似乎Safari无法正确裁剪图像。 so the border of the container is getting covered up by the image, even though the image isn't visible.
因此即使图像不可见,容器的边框也会被图像覆盖。 I tested a couple different things, such as reducing the size of the image, etc, and had similar issues at multiple stages, so this is unlikely to be something you can 100% account for.
我测试了几项不同的事情,例如减小图像的大小等,并且在多个阶段都遇到了类似的问题,因此这不太可能是您可以100%解释的。
Found a solution. 找到了解决方案。 Applying
-webkit-backface-visibility: hidden;
应用
-webkit-backface-visibility: hidden;
and -moz-backface-visibility: hidden;
-moz-backface-visibility: hidden;
to img#photo
resolved the border clipping issue. 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.