Header / Masthead flickering issue

  • Resolved tijo

    (@tijo)


    6 years, 8 months ago

    Hello, I am trying to style the masthead so it doesn’t flicker while clicking from page to page on the site. I have the sticky header activated and have this additional code in my css:
    #masthead.site-header{
    background-color:#ffffff;
    position: fixed;
    width: 100%;
    top: 0;}

    I can’t seem to figure out the issue – any help would be appreciated please!
    Many thanks 🙂

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Jarret

    (@jarretc)

    6 years, 8 months ago

    What do you mean by flicker exactly? When I navigate to a different page the content reloads as it should meaning the menu has to regenerate and then show again.

    Thread Starter tijo

    (@tijo)

    6 years, 8 months ago

    Thanks Jarret.

    If you refresh this page, for example, the entire masthead ‘appears’ to stay in place and not reload. That’s what I’m after.

    On the site I’m trying to fix, the header reloading on every click gives the appearance of flickering.

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    6 years, 6 months ago

    Hey @tijo – I’ve had a look at your site, but I can’t seem to reproduce what you’re describing. Is this still happening?

    Thread Starter tijo

    (@tijo)

    6 years, 6 months ago

    Thanks for looking @jobthomas – Yes I see it using Chrome (Mac and Windows) and Safari.

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    6 years, 6 months ago

    Ah, I see what you mean:

    FOUC
    Link to image: https://cld.wthms.co/Se2Vev

    This is likely a variation of the Flash of Unstyled Content (FOUC): https://en.wikipedia.org/wiki/Flash_of_unstyled_content

    It happens several style sheets are applied to the same element. The browser first loads the first stylesheet making it look a certain way. A bit later it encounters a second style sheet and the browser updates the style.

    I can see that Storefront doesn’t look entirely out of the box on your site so I assume that whatever is making your header look differently is causing this. This might be custom code or another plugin. Could you disable that plugin/code and see if it’s still happening?

    Thread Starter tijo

    (@tijo)

    6 years, 6 months ago

    Thank you @jobthomas
    I’ll work on it next week and hopefully sort it out!

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    6 years, 6 months ago

    👍

    We prefer to not keep the thread open for too long, so I’ll mark it as resolved for now. We can always reopen it or start a new thread if it should be necessary. All the best with the troubleshooting.

    For what it’s worth, we do have a detailed troubleshooting list (for conflict tests) here: https://docs.woocommerce.com/document/how-to-test-for-conflicts/

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Header / Masthead flickering issue’ is closed to new replies.