ā–¼
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.


closed #7

opened #8

#9

Thank you so much Vincent, i have been going crazy over this.

Im using alot of nice animations with text scaling, that scales together with other elements. I was actually using Opacity transitions to hide this flickering/Anitaliasing issues. So i will be happy to use this. Thanks for sharing. Greatly appreciated!

Cheers


#10

See if it works for you. Also, could you read here and try will-change?


#11

If anyone else is looking into this, you can find loads of good info on: https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome


#12

Wow everyone seems to have a different solution :joy:


#13

And to add insult to an injury none of the million solutions worked for me when I wanted to fix this problem somewhere :frowning:


#14

And to add insult to an injury none of the million solutions worked for me when I wanted to fix this problem somewhere

A classic


#15

It did not work for me, I tried everything but ( backface-visibility: hidden ) seems to work if I add it on the animated one BUT what it does it blurred the entire element even if I reload the page hahahaha.
It is funny because Iā€™m almost crying.