Skip to content

Instantly share code, notes, and snippets.

@agantelin

agantelin/gist:1c7b32d47e7aabf2654c7d70afa07ad7

Forked from ayamflow/gist:b602ab436ac9f05660d9c15190f4fd7b
Last active April 21, 2022 20:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save agantelin/1c7b32d47e7aabf2654c7d70afa07ad7 to your computer and use it in GitHub Desktop.
Save agantelin/1c7b32d47e7aabf2654c7d70afa07ad7 to your computer and use it in GitHub Desktop.
Download ZIP
Safari border-radius + overflow: hidden + CSS transform. FIX
Raw
gistfile1.css
// 1st way.
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
// 2nd way.
// on the element with overflow also works and it doesn't break the elements box-shadow, if any is applied
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
// or prefix-free:
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
//Source: https://stackoverflow.com/questions/14383632/webkit-border-radius-and-overflow-bug-when-using-any-animation-transition/16681137
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment