Streaming live at 10am (PST)

A fix for when your elements move up and/or blur during animations/interactions on Chrome


#1

If you do a lot of nice interactions/animations, you may have noticed some elements being jiggy during the animations: they blur and tend to move a pixel up, texts lose their antialiasing for the span of the animation.

I could almost fix them all with the code I found in this post:

I'm using this:

.yourDivClass {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
}

And when text is involved I can add font-smoothing: antialiased !important;

There is a good explanation for why the bug happens and what the fix does, follow the link.


Safari text blurs over background video
3D transform bug in safari pixellating everything - fine in chrome/FF :(
Animtation is blurred on rotation
#2

Hi @vincent, thanks for this. Just wondering, could you please tell me how one would actually put this into effect within Webflow?

Thank you.


#3

Sure, you go to your site dashboard, there's a Custom code tab. Inside there's two boxes, in the Head box, put this code:

<style>
/* Kill the blink/flickering */
.yourDivClass {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
}
</style>

When there's already code in the box, put it at the very end.
You can target multiple classes by adding them this way:

<style>
/* Kill the blink/flickering */
.yourDivClass, .yourOtherDivClass, yourOtherOtherDivClass {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
}
</style>

Scaling image resolution
#4

Thanks for this @vincent. I tried it out on a div with a background image, but as I scroll down and back up, the image no longer appears, until I highlight some of the text superimposed on it. But only parts of it reappear. Why does this happen?


#5

Hi Vincent,

I didn't figure out where do I have to add this style on the parent of the animated element of somewhere else ?

Regards,
Dara


#6

On the animated element itself, does this answer your question? If it doesn't work try on the parent, and up.


#7

#8