Overflow hidden + round corners not working on Safari

[stefania4 (Stefania)]

Apparently, it’s a bug on safari.
Any workaround/code to fix this?

http://stefanias-first-project-e6faf1.webflow.io/issue-2

safari on the left chrome on the right

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[vincent (Vincent Bidaux)]

Hi Stefania,

1. round corners don’t need overflow hidden most of the time (they don’t need it for bg images for example)

2. your link plays well in my Safari, look:

http://vincent.polenordstudio.fr/snap/issue_2_2018-09-21_15-01-03.png

[matthewpmunger]

Hey @stefania4

In Safari, everything also looks find for me until I hover over the element.

Are you able to share a read-only link?

Share a read-only link | Webflow University

[sabanna (Anna)]

Hi, @stefania4!

This Safari bug is well known (don’t know why they didn’t fix it). Workaround you can find here: Safari not hiding overflow on rounded corner divs

[stefania4 (Stefania)]

thanks @sabanna ,
Now it’s working.

I used this as reference:

Webkit border-radius and overflow bug when using any animation/transition

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