Streaming live at 10am (PST)

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


#1

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


#2

I find this “unsolved” topic:

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:

http://shouldiprefix.com/#transforms


#3

Hi Siton,

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

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.

How do I do this?

Here ya go: