[Support request] Font antialiasing changes on sticky menu when page is scrolled.

Home Forums Support Font antialiasing changes on sticky menu when page is scrolled.

This topic contains 5 replies, has 2 voices, and was last updated by  David 3 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #983281

    Brett

    There is a subtle but noticeable change to the color of fonts in a sticky menu when the page is scrolled and the sticky menu reappears. It looks to be an issue related to antialiasing using grayscale vs subpixel. Before scrolling, the font is rendered using subpixel antialiasing, but when the sticky menu reappears after scrolling greyscale antialiasing is used.

    #983464

    David Customer Support

    Hi there,

    GP doesn’t use any font anti-aliasing CSS properties on the fonts. And we’re not able to see the issue. Is this on any particular device or browser?

    #984212

    Brett

    I’ve looked further into this. I now think its browser related. Firefox and older versions of Chrome do not have this issue. Chrome version 75 (Windows 10 64bit) and version 76 do have the issue. The latest version of Edge does have the issue too but I think its based on Chromium code now (like Chrome)… David, if you can’t see the issue maybe you have ultra HD monitors, or are using a different browser than me… Thanks.

    #984221

    David Customer Support

    Maybe the device itself related with quirks of the browser is causing the issue.
    There is one issue that i am aware of if a fixed element ( eg. Sticky Nav ) passed over a transformed element ( could be the slider of example ) that it can mess up certain rendering.

    Try this CSS to see if it cures it:

    .main-navigation {
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
    }
    #984240

    Brett

    The CSS you provided does change things. What it does is make the font render using greyscale anti-aliasing (instead of subpixel anti-aliasing) before the page is scrolled down. So the font now appears consistent before and after scrolling. The old behaviour, and what I would like, is for subpixel anti-aliasing to be used for both before and after scrolling.

    #984291

    David Customer Support

    You would need some CSS like this to force the webkit browser to use anti-aliasing:

    html,
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.