Not a bug Xenforo navbar intermittent 'blinking', in all browsers but firefox..

S

sross

Active member
I was having this issue on my own site and thought it was just me and some bad addons or code, then to my surprise I reproduced it here. Xenforo seems to be quite visually stable in firefox but in chrome, safari and edge it is vastly different. In firefox the navbar rarely blinks or the full page rarely reloads (when for example viewing the same thread different page) or 'flashes'. In my tests maybe a blink one out of 10 times on firefox where in other browsers 7 out of 10 times we get this blinking and flashing of the navbar or page.

To reproduce first go to a forum thread such as this one in firefox:

https://xenforo.com/community/forums/troubleshooting-and-problems.24/

click the page numbers 1 2 3 4 etc and watch the navbar. In firefox it's solid, doesn't blink. In other browsers sometimes the navbar blinks or the page in general flashes. There are times when I've gotten it to blink 10 times in a row in browsers other than firefox. I notice in chrome the navbar is static but colors in the navbar shift when moving between various pages instead of blinking.

I'm on a recent macbookpro retina, latest OSX and latest browser builds. I am curious if others are seeing this? One of my developers spotted it while we were trying to figure out the issue on my site. Then trying it here it did the same. Maybe it only happens in OSX, I do not have a windows machine to test on. I have tested on 3 macs, same blinking.
 
I don't think it's the gradients in this case -- I think it's the actual header "display".

But in this case, it would also be as expected to some degree. The header HTML has been placed at the bottom of the page to allow display of the main content more quickly. Depending on internet speed and when the browser starts to render the page, it could cause a quick flash of the header (as it's rendering the page before downloading that part of the HTML). It's not exactly "designed" this way, but it's not unexpected.
 
Mike said:
I don't think it's the gradients in this case -- I think it's the actual header "display".

But in this case, it would also be as expected to some degree. The header HTML has been placed at the bottom of the page to allow display of the main content more quickly. Depending on internet speed and when the browser starts to render the page, it could cause a quick flash of the header (as it's rendering the page before downloading that part of the HTML). It's not exactly "designed" this way, but it's not unexpected.
Click to expand...
Is there a way to override this behavior? It's far more distracting visually to have the header blinking vs. the page content not blink. My preference would be the page header/navbar never blinks/reloads and is uniformly consistent and stable and what is under it loads. You can see here vBulletin5 achieves this in every browser. Having tested this page the top of their pages (header) never blink or refresh on page loads:

http://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-feedback

The top of their site is solid as a rock. Surely we can achieve this too?
 
Martok said:
I believe this is basically the same as this report which was marked as not a bug.

https://xenforo.com/community/threads/gradients-not-loading-instantly-on-chrome.112217/
Click to expand...
Sorry, but I think when the top 1/4 of a modern forum software is constantly blinking and virtually no other competitors in this space have this issue, certainly it is a bug? I would agree with 'different browsers handle loading in different ways' but I can't reproduce it on other systems. As for my system and connectivity I'm on a new macbook and gigabit fiber..
 
Just to clarify, there are potentially 2 behaviors here. If you just see the color shift, that's down to how browsers load images (background images) separately. For this behavior, you'd probably want to remove the background images from these areas (or perhaps use far-future expiry headers on your styles directory, though you'll need to understand this may make changing them harder). If the whole header, then it's down to what I said; you'd need to move the HTML and adjust the CSS to fit your needs. It was an intentional design decision.

If you're not seeing the image behavior in other systems (assuming they're using images for this), it may be down to their HTML structure delaying the entire render until later, masking the issue.
 
Mike said:
I don't think it's the gradients in this case -- I think it's the actual header "display".

But in this case, it would also be as expected to some degree. The header HTML has been placed at the bottom of the page to allow display of the main content more quickly. Depending on internet speed and when the browser starts to render the page, it could cause a quick flash of the header (as it's rendering the page before downloading that part of the HTML). It's not exactly "designed" this way, but it's not unexpected.
Click to expand...
Fair enough. I assumed it was the gradient in the navbar as that's the only thing I see 'flashing' when I checked the page linked to by the OP (using Chrome on a Macbook Pro).

sross said:
Sorry, but I think when the top 1/4 of a modern forum software is constantly blinking and virtually no other competitors in this space have this issue, certainly it is a bug? I would agree with 'different browsers handle loading in different ways' but I can't reproduce it on other systems. As for my system and connectivity I'm on a new macbook and gigabit fiber..
Click to expand...
As
sross said:
I'm on a recent macbookpro retina, latest OSX and latest browser builds.
Click to expand...
I'm only seeing the gradient 'flashing', not the top quarter of the forums flashing (at least on here anyway) and I'm using the same as you. I do see it on my own site though.
 
Mike said:
Just to clarify, there are potentially 2 behaviors here. If you just see the color shift, that's down to how browsers load images (background images) separately. For this behavior, you'd probably want to remove the background images from these areas (or perhaps use far-future expiry headers on your styles directory, though you'll need to understand this may make changing them harder). If the whole header, then it's down to what I said; you'd need to move the HTML and adjust the CSS to fit your needs. It was an intentional design decision.

If you're not seeing the image behavior in other systems (assuming they're using images for this), it may be down to their HTML structure delaying the entire render until later, masking the issue.
Click to expand...
I'm not a coder so will defer to someone who can try to fix this for me. So far I have tested vbulletin5, phpbb, invisionboard and smf and none of them blink, their headers are solid.
 
Any which employ gradients have the same issue though. It seems to be something odd happening in Chrome.
 
I'd be fine if it were a gradient issue, i'd just remove them, but in chrome, edge and safari the navbar is blinking. Here is a quick video (would do more but need to sleep). It shows the page flash twice, but the 3rd click is navbar based and that is what I see constantly in all browsers, this blinking navbar. Only firefox seems to not do it. It's really bad on my site, my entire navbar disappears for like 1/4-1/2 seconds at times (my site is on a 24 core dedicated server/SSD, etc with plenty of resource). Also, I can't see how this is a browser issue when no other systems do it? Just trying to get to the bottom of it :)

video:

https://drive.google.com/file/d/0B_dH48UEoD-oRVlPa2VTd05hcDA/view?usp=sharing
 
Just to clarify, there are two things at play here.

Your video demonstrates the header moving. This is not something I ever see on my Mac, by the way, so that's odd. But we know the cause for this and it's what Mike described here:
Mike said:
But in this case, it would also be as expected to some degree. The header HTML has been placed at the bottom of the page to allow display of the main content more quickly. Depending on internet speed and when the browser starts to render the page, it could cause a quick flash of the header (as it's rendering the page before downloading that part of the HTML). It's not exactly "designed" this way, but it's not unexpected.
Click to expand...
XF employs a relatively unique concept here. The header of the default style is actually in the footer. We use CSS to position it. What you are seeing is essentially what it is designed to do: you're seeing all of the content load on the page before the header does. This can lead to the "flash" you're describing but I can't recall it being brought up much as an issue in the last 6 years.

Ultimately, this is a side-effect of a specific design decision and it isn't changing in the short term.

To handle this in the short term, you simply need to move the header into the desired position and remove the need to position it with CSS. Some custom/commercial styles do this out of the box. I'll see if I can more specifically point you in the right direction of what to change.
 
Chris D said:
Just to clarify, there are two things at play here.

Your video demonstrates the header moving. This is not something I ever see on my Mac, by the way, so that's odd. But we know the cause for this and it's what Mike described here:

XF employs a relatively unique concept here. The header of the default style is actually in the footer. We use CSS to position it. What you are seeing is essentially what it is designed to do: you're seeing all of the content load on the page before the header does. This can lead to the "flash" you're describing but I can't recall it being brought up much as an issue in the last 6 years.

Ultimately, this is a side-effect of a specific design decision and it isn't changing in the short term.

To handle this in the short term, you simply need to move the header into the desired position and remove the need to position it with CSS. Some custom/commercial styles do this out of the box. I'll see if I can more specifically point you in the right direction of what to change.
Click to expand...
Thanks Chris. I have a style guy and think he could sort this out if pointed in the right direction. I think one of the problems with this current method xf uses is the more addons and visuals you have the more pronounced the blinking becomes. On a stock site like this not really an issue but other sites will suffer the much more noticeable blinking. Maybe 2.0 needs an option to load header top or bottom. Maybe someone will create an addon or tutorial on how to change it for 1.x
 
It's possible, but again, it's one of those things that really doesn't get brought up very often. I guess some people may just see it as less significant than others.

As for a solution, it should be pretty painless. Open the PAGE_CONTAINER template and find:
Code: 
<header>
    <xen:include template="header" />
    <xen:edithint template="navigation" />
    <xen:edithint template="search_bar" />
</header>

Remove that.

Now find:
Code: 
<div id="headerProxy"></div>

And replace with:
Code: 
<header>
    <xen:include template="header" />
    <xen:edithint template="navigation" />
    <xen:edithint template="search_bar" />
</header>

Now open the public.css template and remove:
Code: 
/** move the header to the top again **/

#headerMover
{
    position: relative;
    zoom: 1;
}

    #headerMover #headerProxy
    {
        @property "header.background";
        background-color: @primaryMedium;
        @property "/header.background";
        height: {xen:calc '@headerLogoHeight + @headerTabHeight * 2 + 2'}px; /* +2 borders */
    }

    #headerMover #header
    {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

This may have mixed results depending on your specific style but it works as expected on the default style.
 
Top Bottom