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

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