3D Transform Flicker Bug in Safari?

Design help General
1

I’m seeing a flicker in my 3D transform animation that is triggered by scrolling in and out of the lower section on the following page.

http://3d-transform-bug.webflow.io/

Basically there are four icons that rotate around 360° as they load similar to the “Card Flip Interaction” shown here on Webflow’s own 3D Transform demo page, in example 3 http://3d-transforms.webflow.com/ . The icons are comprised of an image and a flipcard back div. These work fine in Chrome and Firefox, but in Safari the images stay behind the back div until the rotation stops and then they “pop” in front.

Share link: https://preview.webflow.com/preview/3d-transform-bug?preview=145d97e042c5510a6c75343d2ed792ec

Is this a Safari bug?

Thanks!

JFly

2

(bump) This post needs a (/bump)

3

Hi @JFly, could you try pasting this into the Head of your site in custom code:

<style> 
body { -webkit-font-smoothing: antialiased; }
</style>

Save changes and republish, and see if the issue still occurs? I hope this helps.

4

Thanks @cyberdave, I added the code as you said but it didn’t seem to fix it.

5

(bump) sorry for the second (/bump)

6

@cyberdave Thank you for the fix–is this something the Webflow team is considering implementing automatically as a permanent fix for the issue?

7

Okay - well, I basically ended up rebuilding this animation to diagnose what was going on…

Looks like I was using an image for the front of the flipcard element and ended up putting that in a div with a background fill to match the shape or the flipcard back element. Also, It seems that I may have not been hiding backfaces properly. So, it’s a little different than what I started with but it works for now.

Thanks @cyberdave for the help though!

JFly

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.