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

Community resources Webflow Tips
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:

http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome

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.

9 Likes
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>
4 Likes
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.

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?

1 Like
11

If anyone else is looking into this, you can find loads of good info on: Blurry text after using CSS transform: scale(); in Chrome - Stack Overflow

1 Like
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.

16

@vincent Just signed Up to thank you,
Anyone who cant figure out how to use it,
Add the CSS font-smoothing: antialiased !important; to the element where there is ANY animation or transition. this will remove the stutter or jitter from text on the current view

17

You may want to declare it like this if you want things to work on browsers outside mac os:

.your-transforming-element {

    font-smooth: always !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;

}

Also this is not guaranteed to work, it helped a little bit, but not 100%.

18

To everyone where it does not work, for me it worked when i rename the class from Div Block 51 to wrapper-right so maybe the number stuff at the end of the class is the problem!So a big thanks to @vincent you are truely a expert!

1 Like
19

Maybe also a cache issue, but I’ll make sure to check my classes names next time I have no result with this code. Thanks for reporting!

20

Hi @vincent vincent, not sure if that is the same case, I have an div block with a picture and some text in it dopping down by a few pixels at the end of animation, do you mind glancing at my project here?

It’s on the home page, div called .alex-wrap in the top hero image

Here is the live site