Safari border-radius + overflow: hidden + CSS transform fix

gistfile1.css

// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
❤️💙💙💙💙💙❤️❤️💙❤️❤️❤️💙❤️
❤️❤️❤️💙❤️❤️❤️❤️❤️💙❤️💙❤️❤️
❤️❤️❤️💙❤️❤️❤️❤️❤️❤️💙❤️❤️❤️
❤️❤️❤️💙❤️❤️❤️❤️❤️💙❤️❤️❤️❤️
❤️❤️❤️💙❤️❤️❤️❤️💙❤️❤️❤️❤️❤️
❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

❤️❤️❤️❤️

❤️

🙏

this solution seems to help to a degree. It makes the line slightly thinner but I'm still seeing a border with overflow hidden.

div {
  position:relative;
  width:200;
  height:200;
  background: #781728;
  border-radius: 100%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(#6CB3A9, #6CB3A9);
  top:40;
  left:90}

Awesome!

Thanks!

❤️

How can I buy you a beer!?

Thank you! Also works for me in Chrome.

Thanks a lot man...

Not all heroes wear capes

isolation: isolate; fixes this issue. isolation property works in all browsers.
Demo: https://codepen.io/thebazel/pen/NWeYgRm

We're in July 2024 and this is still the only solution that worked for me.. Thank you!

isolation: isolate; worked for me. Thanks! ❤️