Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.
Save ayamflow/b602ab436ac9f05660d9c15190f4fd7b to your computer and use it in GitHub Desktop.
Safari border-radius + overflow: hidden + CSS transform fix
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@thebazel
Copy link

thebazel commented Sep 25, 2023

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

@davelavoie
Copy link

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

@tzachyrm
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment