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?
What it looks like on Chrome (how it should look on Safari):
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?
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.