Streaming live at 10am (PST)

3D effect issues with safari browser


#1

Good day,
I made a little 3D effect my hero section but the problem is when I test the site in safari, parts of the 3D element show through my dropdown menu and my popup models. This seems to only occur in safari as everything works fine in other browsers. Please advise me on how to rectify this.

The site: http://crystals-water-pastel-blue.webflow.io


#2

Hi @Xavier_Henry

Thanks for reaching out and great question. There are some known quirks with 3d transforms and Safari (example).

Adding some self-perspective to the dropdown list resolves the issue (GIF):
55%20AM

Hope this helps :slight_smile:


#3

Oh, my it worked. Thank you very much for the solution. This thing had been stumping me for days but why are there so many glitches with safari?


#4

why are there so many glitches with safari?

That’s a great question! :sweat_smile: A glitch like this isn’t Webflow specific, but rather are a result of how nicely certain CSS attributes play with Safari — which isn’t very nicely sometimes. And because Webflow outputs CSS and HTML as if you’d written it yourself, sites built in Webflow are subject to those same glitches.


#5

Ah, I understand. Thanks again for the help and the swift response.