Odd Text Behavior When Hovering

Hello Ladies and Gents!

Please hover over the “LEARN MORE” and observe the behavior of all text on the page, and compare that with the hover effect of the button on the form field.

https://preview.webflow.com/preview/stonecraft-media?preview=adabea3e64566878f1359daf37b89d78

Did I do something wrong in my styling, or is this a bug in the designer / browser I am using? (Hint: I am using Safari 10.0.3 on Mac OS Yosemite 10.10.5.)

It didn’t happen on chrome so I checked on Safari.

Safari has issues with sub pixel rendering and anti aliasing. That’s what’s happening here.

When an element is in motuon, it can’t be antialiased at the same time, and the sub pixel rendering is also turned off. On some browser and certain conditions, especially when the moving element is lower in z than the rest of the page, the antialiasing and/or sub pixel rendering of the other elements is also turned off.

Solution one doesn’t work on everything but must be tested first): give a higher z-index to the element in question

Solution 2: add this custom code to force antialias and/or sub pixel rendering

<style>
/* webkit css animation flickering fix*/    
    .class-of-the-element  { 
                        -webkit-perspective: 1000;
                        -webkit-backface-visibility: hidden;
                        -webkit-font-smoothing: antialiased !important; 
                        font-smoothing: antialiased !important; 
                    } 

</style>

Replace .class-of-the-elementby the class of your element.

2 Likes

Thanks @vincent!!

Do I want to put a “<…style…>” tag under the “/* webkit css animation flickering fix*/”?
And also, do I put this custom code in the header or footer part of the site settings here in Webflow?

Yes sorry I edited my code.
Header.

1 Like

I tinkered a bit…

  • added the custom code.

  • I published my site to a Webflow subdomain.

  • Tested the transition effect on the actual published subdomain. (Everything seems fine now.)

  • Went back into editor, and the issue persists.

So then I tinkered some more…

  • removed custom code.

  • republished site.

  • tested transition on the actual published subdomain. (Everything still seems fine.)

  • went back into editor, and the issue persists.

It would seem that this is an issue INSIDE of the editor + preview mode, and not an issue with a published site.

@webflow, got any ideas?

Hi @anonmusic, custom code that is entered into the header or footer, is not rendered in the editor or in Preview mode, and is not run until the site is published.

I hope this helps!

1 Like

Thanks for the response, @cyberdave!

I understand that custom code requires publishing, however the issue only happens inside the designer + preview mode. I literally just published again to test without custom code, and the issue does not happen.

Here’s the published site: http://stonecraft-media.webflow.io

Here’s the read-only designer access: https://preview.webflow.com/preview/stonecraft-media?preview=adabea3e64566878f1359daf37b89d78

As you can see, the published site behaves correctly (without custom code), whereas the designer + preview mode shows unexpected visual anomaly for all other text on the page.

Hi @anonmusic, I am a little confused what is happening, can you please create a screencast gif or video using getcloudapp.com and post the link?

Here’s what I see in the design view and on the published site:

https://cl.ly/1C0g2x0T3N3i/Screen%20Recording%202017-02-11%20at%2008.01%20PM.gif

Thanks in advance.

@cyberdave here’s that GIF :slight_smile:
(I learned how to make a GIF from a screencast just for this purpose haha! Sweet!)

Side note: cloudapp.com doesn’t work… so I used an app called Giphy Capture for Mac.

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