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.
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.
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
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/
Hello Together,
I ran into the same Problem @levifrey did.
I checked the Console and there weren’t any issues. So i checked every element step by step and saw the height of the images in safari was 0px. Maybe you can try to set an width and height to every image in my case it helped.
