CODEWITHSUNDEEP
htmlcssborderclipping
nrweb
nrweb

Reputation: 221

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

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:

enter image description here

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>

Upvotes: 0

Views: 1216

Answers (2)

nrweb
nrweb

Reputation: 221

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

Upvotes: 1

Lee A.
Lee A.

Reputation: 33

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.enter image description here

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:

enter image description here

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.

Upvotes: 0

Related Questions