Skip to content

Instantly share code, notes, and snippets.

@nikola-wd

nikola-wd/safari_bdrs_fix.css

Created May 31, 2021 18:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nikola-wd/486862ec107e6c17cb040a9ad6acc3cc to your computer and use it in GitHub Desktop.
Save nikola-wd/486862ec107e6c17cb040a9ad6acc3cc to your computer and use it in GitHub Desktop.
Download ZIP
[safari border-radius fix] border radius not working properly on safari fix #css #scss #safari
Raw
safari_bdrs_fix.css
https://forum.webflow.com/t/overflow-hidden-round-corners-not-working-on-safari/67805
The issue is the combination of overflow, border-radius, and transition
This is the solution:
On the element with overflow:
.transitionfix() {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0)
}
plus
added minus z-index value for image and higher value for the parent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment