CODEWITHSUNDEEP
javascripthtmlcss
Teebs
Teebs

Reputation: 795

CSS border-radius of a div:after pseudo element rendering wrong on first load

I've been playing around with changing an images color overlay, through the use of a div:after pseudo element, with matching border-radius.

https://jsbin.com/konopak/1/edit?html,output

You will notice on first load the background color is a solid square, but if you shift the frame, or change any element on the page it renders it properly. Is there a way to make it render properly on first load? Why is this happening?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>

  <style>
    img {
      max-width: 100%;
      height: auto;
      border-radius: 90px;
    }

    .hero-image {
      position: relative;
      max-width: 200px;
      display: flex;
      background-color: #ff000050;
      /* border-radius: 90px; */
    }

    .hero-image:after {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: inherit;
      top: 0;
      left: 0;
      display: block;
      content: "";
      border-radius: 90px;
    }
  </style>
</head>
<body>
<label id="color-label" style="background-color: #ff0000; height: 18px; width: 18px; border-radius: 10px; cursor: crosshair;">
  <input id="color-tag" type="color" value="#ff0000" style="visibility: hidden;">
</label>

<div class="hero-image">
  <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400" id="cat" alt=""/>
</div>

<script>
  const label = document.getElementById('color-label');
  document.getElementById('color-tag').addEventListener('change', function () {
    label.style.backgroundColor = this.value;
    let imgDom = document.querySelector('.hero-image');
    imgDom.style.backgroundColor = this.value + '40';
    // imgDom[0].style.backgroundColor = this.value;
  });
</script>

</body>
</html>

Upvotes: 0

Views: 1240

Answers (1)

Samuel Goldenbaum
Samuel Goldenbaum

Reputation: 18929

You can simply add overflow: hidden; to the parent and remove the additional border-radius properties and display: flex which is causing the display issue in safari.

I suggest making a few updates as per below to help with image scaling too:

 img {
      width: 100%;
      height: auto;
    }

    .hero-image {
      position: relative;
      max-width: 200px;
      max-height: 200px;
      background-color: #ff000050;
      border-radius: 90px;
      overflow: hidden;
    }

    .hero-image:after {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: inherit;
      top: 0;
      left: 0;
      display: block;
      content: "";
    }

The container parent's radius + overflow should be all that's needed and the additional child properties are superfluous.

JSbin update

Upvotes: 1

Related Questions