Hi all, trying to make this 3D rotating cube and it renders correctly in Chrome and Firefox, but not Safari. It looks like the cube’s faces are stretched across the whole website as it rotates (See Google Drive links to screen recordings below). Site is ghoste.webflow.io.
Solutions I’ve tried so far:
Hiding the backface of each cube face
Adding a 1001px self-perspective to the cube faces
Removing the inner/outer glow from the cube face divs
Any ideas on how to fix this?
Thanks!
What it looks like on Chrome (how it should look on Safari):
hi @strawpari , I believe that webflow does not have the full Webkits for safari when it comes to webflow. Try to make interactions with Position Absolute items, instead of Flex.
The class you are using for the animation c-HUD__cube is on Flex, try to place it on inline-block and use the other items with absolute position.
Carlos, I have a similar issue with an element that has 2 interactions. I’ve done a million things to try to fix it but nothing has worked. I’ve pinned down that the interaction that causes the glitch is a Rotation on a element with Z value of 0 while text is over it with a Z value of 1.
I’ve separated the elements to a new page to be able to troubleshoot without affecting the design.
Tried that Vince. I removed the Z values in “position” and added the Z values 1 px under transforms and it doesn’t seem to work either. Am I doing something wrong?
Update:
Ok, I kept trying different things and apparently the transform Z index value won’t really work on text, so eventually I used a wrap div with relative position and a Z index value of “auto” and added the value you suggested in the 2d 3d transform section and it worked. The Div under it (the one rotating with the animation) is set to static and none of the divs are flex because I’ve heard that Safari doesn’t do well with Flex boxes from Webflow.
To recap for other webflowers: I had two elements stacked and one of them had a rotating animation that would not look “stacked” son Safari. The animation would cause the Element closer to user, to disappear partially while animation was looping.
hey @vincent I experience a similar problem with an interaction in safari:
I avoided using z-index and set the hierarchy with the transform properties.
Circle 0px
Rounded box 1px
Logo 2px
In chrome the animation works perfectly but in safari I keep getting the bug where the box disappears behind the circle, also the background blur is missing in safari.
I really hope you can give me a good advise!
Thanks a lot, I really appreciate it.
Am I doing something wrong?