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

Question

What causes an image to clip a parenting element's border-radius ? Both the image and the parent element have a border-radius: 50% applied, but it still causes the clipping to occur.

This is the issue I am facing in Safari:

It seems to be a Safari-specific issue, from what I can see. 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> 

Answer 1

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.

The only suggestion I can make, if you're still seeing the issue, is to add box-sizing: border-box; to #photo-container a as well.

As far as why it's happening, This is why:

It seems Safari has trouble cropping the image correctly. 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.

Answer 2

Found a solution. Applying -webkit-backface-visibility: hidden; and -moz-backface-visibility: hidden; to img#photo resolved the border clipping issue.

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