Font blink when used with interaction

Design help Animations & Interactions
1

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.

http://hoquanstudio.webflow.io

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?

2

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.

<style>
/* 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);
                    }
</style>

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.

3 Likes
3

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?

4

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:

5

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

6

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

7

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

1 Like
8

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