3D Transform Flickering Glitch (Safari-only issue)

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):

What it looks like on Safari:


Here is my public share link: https://preview.webflow.com/preview/ghoste?utm_medium=preview_link&utm_source=dashboard&utm_content=ghoste&preview=b7b2f613c02e0c3e1cb95943af129fe7&mode=preview

1 Like

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.

Let me know when you test this!

3 Likes

You’re an absolute god-send! It works now. ghoste.webflow.io

Thank you!

1 Like

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.

If you can please open this link in Chrome and Safari, you’ll see the issue. https://stella-nicole.webflow.io/testing

Read only link
https://preview.webflow.com/preview/stella-nicole?utm_medium=preview_link&utm_source=designer&utm_content=stella-nicole&preview=e1843a2163ac00dc9420103df7d3a073&pageId=5fd0855a2137601f2c17194e&mode=preview

You have set Z-INDEX values. As far as you can, avoid Z-INDEX when you do 3D transforms.

Use the Transform on Z. Make your text move on the Z axis, 1 pixel towards you. This way it won’t be colliding with the hat anymore.

Z-INDEX is made to define a drawing order, it doesn’t move anything.
Transforms is actually moving things in space.

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. :frowning: 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.

Vincent, you are Webflow Designers’ Christmas gift. Thank you for looking into it. I knew you would solve it right away.

I have another issue if you can please look into it when you get a chance.

I don’t have an answer for that. Soundcloud things break regularly, chrome blocks more and more things too, so it’s not necessarily your fault.

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.