[safari border-radius fix] border radius not working properly on safari fix #css #scss #safari

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