Streaming live at 10am (PST)

Font blink when used with interaction

Hi all. I am creating a website using Webflow and apply some cool interactions to thebuttons and divs using the Interaction Panel. My previous website works fine, but in this case, there is a disturbing problem.

For some unknown reason, every time I hover on a button, every text on the site (except on the header & footer) flashes for 1/2s and then turns back to normal. The problem only occurs when I view it on Safari, it doesn’t happen on Chrome. I tried deleting the Interactions and this problem disappears, so I guess the problem lies there. However, my previous website used a lot of Interactions but there was no problem similar to this one at all. Could someone tell me what I have done rong?

Yeah Safari disables anti aliasing during the span of the transform animation… that’s a pain in the Alps.

To limit that effect, always put a higher z-index to the elments that blinks. Sometimes it fixes it, but in your case I doubt it will fully fix it.

Let’s fix this with bunch of custom code lines.

/* Safari & Webkit blinking fix */
  .class {
        -webkit-backface-visibility: hidden;
        -webkit-font-smoothing: antialiased !important; 
        font-smoothing: antialiased !important;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        transform: translateZ(0);

Now replace .class with the class of the elements that are affected. You can put multiple ones like this: .class1, .class2, .class3

It is better to put that snippet in the custom code section of your sites’ dashboard, in the Head subsection.


Also, what about the title of your post being totally unrelated to the question you ask in it? (: Do you also have a Youtube code issue?

Oops, sorry, I intended to ask that question about a month ago, but somehow I found someway to work around it. When I come back to the topic posting panel, the stuffs I wrote are still there, so I must have missed the title. I’m sorry for the misleading title.

Thanks for your answer. I will definitely try it tonight. :smile:

hahaha I was pretty sure of something like this :wink:

It’s quite a late reply but I have tried your code and it worked perfectly. Thanks a lot for your help.

Ah thank you for your feedback, it’s quite an important fix, I’m always trying to make it better.

1 Like

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