Streaming live at 10am (PST)

Overflow hidden + round corners not working on Safari


#1

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)


#2

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:


#3

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?


#4

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


#5

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