Safari shows pure black blocks in divs on lighter background, even though the div elements are transparent

[Semih (Semih Yilmaz)]

Hi guys,

I’m not really sure if this is a bug, however I have a website with a slightly lighter black background. And some divs, even though they have transparent backgrounds, show a pure black block.

This is all happens only in Safari.

Check out the screenshot, you need to look closely, but it is definitely there:

Here is the read-only link: https://preview.webflow.com/preview/smhylmz-test?preview=a86ec429bb4bfe2f099d97db1d779b83

How do I fix this?

Thanks a lot,
Semih

[Siton_Systems (Ezra Siton)]

I find this “unsolved” topic:

Transparent background color safari

Yeah I have done some digging around and testing. The known issue is that if transparenci is set to “Transparent” Safari will render that as black. And the solution for that was to change the background color from “transparent” to rgba: 255, 255, 255 0% (or any color at 0%). But this doesn’t not work in webflow anymore. But the really odd think is that if you look at the event page (link above) you will see the issue on the background of the tabs menu, but as you start scrolling down the page an…

Anyway, I guess this is a bug in your interaction and opacity (Disable JS and check this please - add/remove interaction and test this) & transform without ventor prefix. Also, could you go to safari inspect element - and add a screenshot of the styles you get? (I don’t use mac).

Example:

CSS3 opacity transition not working in Safari

http://shouldiprefix.com/#transforms

[Semih (Semih Yilmaz)]

Hi Siton,

Thanks for the reply. Sorry for the late one on my end!

(Disable JS and check this please - add/remove interaction and test this)

Yes, I’ve disabled JS and it disappeared for the most part, but not in the hover states of nav links. Removing interactions fully, did the trick. But then again, that unfortunately means I have to remove the animations, which I really want to prevent.

transform without ventor prefix

How do I do this?

Also, could you go to safari inspect element - and add a screenshot of the styles you get? (I don’t use mac).

Here ya go: