Overflow hidden + round corners not working on Safari

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)

1 Like

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:

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?

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

1 Like

thanks @sabanna ,
Now it’s working.

I used this as reference:

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

4 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.