3D-Objects dont appear in Safari

Hi

I’ve been trying to solve this problem for a few days now but I’m just not getting anywhere and it’s stressing me out.

I am working on my personal website and on the home page I want to implement a small interaction that objects rotate with the mouse. The implementation actually worked fine until I tested the page on Safari… On Safari, the objects don’t appear at all - only the text appears. I did not work with Z-Index but with 3D-Transform.

Here are two screen shots:
Google Chrome (This is how it should look): Awesome Screenshot
Safari (this is the problem): Awesome Screenshot

What am I missing? I actually know Webflow pretty well - at least I thought I did, but I don’t see the problem here.

I hope you can understand the problem and maybe know more. Im still working on the site so please dont judge the mess x)

Thanks for any help.


Here is my public share link: Webflow - dobbbbl

Happy to try and help, as I’ve hit safari issues on all the webgl projects I’ve worked on.
But I can’t see your screenshots, as they are behind a login page. Can you attach them to your post?
And you may already show javascript errors, but if not make sure they are visible in your screenshots, otherwise it’s really hard - if not impossible - to debug.

My bad – Sorry!


The objects missing in Safari shouldnt just appear, they should aswell rotate on hover like they do i Chrome.

Hope you see the problem :grin:

yes I see the problem as in I see indeed an object is missing! But without the potential errors in the dev console, that’s not fixable. Can you share those?

At least with your screenshots, I can see your url ( https://dobbbbl.webflow.io/ ), and it works fine in my safari, so no errors in my dev console which could help. But hopefully you see some on your end which should give clues as to what to do

How can i view these errors/dev console in Safari?

Sorry, im not that into dev-stuff :sweat_smile:

go to develop → Show Web Inspector, then open the ‘console’ tab.

Sorry I understood this was done in webgl, so I assume you’d have some dev experience. But after looking at the dom, it seems this is all done using css transform. So you’ve done this only using webflow editor, is that correct?

I’d be tempted to think that the css properties you are using are just not supported by your version of safari. Maybe this can help? https://caniuse.com/

All good – like i said, im not that into dev-stuff, thats why im mainly using “pure Webflow”. Yes, i created this using only Webflow without webgl.

Im using the newest version of Safari, that shouldn’t be an issue.

Cool. In that case, I won’t be of much help unfortunately.