Streaming live at 10am (PST)

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

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!

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

Thank you!