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.
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
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?
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 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.
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.