CODEWITHSUNDEEP
htmlcsssafari
pez
pez

Reputation: 4235

Safari does not resize responsive background-image radial gradient

I'm using a radial-gradient() within a background-image.

The radial-gradient() is used to create a responsive ellipse.

On both Chrome and Firefox, the gradient resizes as expected when the window changes size. On Safari, it does not resize. The only way it resizes on Safari is if I make a change to the code, at which point it re-renders and then takes the appropriate size - but then it will remain at that size regardless of window resizes.

In the linked MDN documentation, the browser compatibility table at the bottom specifies that Safari fully supports all features of radial-gradient(), and supports all the same features of background-image that Chrome does. So I don't think it's necessarily a compatibility issue, although clearly something is wrong.

How can I get Safari to correctly resize this gradient as the window size changes?

This occurs in Safari version 18.2 on a Mac.

You can see the issue if you run this code snippet in Safari, Chrome, and Firefox separately. Run it and then resize your window. In Chrome and Firefox, the red ellipse will resize. In Safari, it will remain at whichever size it had when you first ran it.

#inner-parent {
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#child {
  height: 100%;
  width: 100%;
  background-image: radial-gradient(ellipse 10vw 12vw at 50% 35%,
      red 80%,
      transparent 20%);
}
<div id='outer-parent'>
  <div id='inner-parent'>
    <div id='child'></div>
  </div>
</div>

There are seemingly many similar questions. None of them solve or address this issue. Some of them are linked below.

Question Comments
Safari Not Resizing Background Image No answers; does not use radial-gradient()
Background image and radial gradient on responsive element? Not Safari-related
Radial-gradient over a background image does not work on Safari Uses legacy -webkit-radial-gradient(); answers do not solve the issue
CSS radial gradient for Safari not working Uses legacy -webkit-radial-gradient(); answers do not solve the issue
How to make radial gradients work in Safari? Outdated, radial gradients are now fully supported
CSS webkit radial + iPad (Safari Mobile) not working Specific to mobile Safari; conflicting answers

Upvotes: 2

Views: 70

Answers (1)

Temani Afif
Temani Afif

Reputation: 273473

I cannot test on Safari but maybe with a different syntax you won't have the issue.

#inner-parent {
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#child {
  height: 100%;
  width: 100%;
  border:1px solid;
  background:
    radial-gradient(50% 50%,red 80%,transparent 0)
    50% 35%/20vw 24vw no-repeat;
}
<div id='outer-parent'>
  <div id='inner-parent'>
    <div id='child'></div>
  </div>
</div>

Upvotes: 3

Related Questions