Hi there!

I usually see a glitch with the sidebar. When I load whatever page, first the .primaryColumn occupies 100% of its container. Then, the sidebar appears.

This also happens here, in invisioncommunity.

Adsense is loaded before the sidebar appear and Ads get full size.

Could we try to load the sidebar in advance?

It sounds very much like an issue with your browser rendering things there. Have you tested this on another browser?

 

It sounds very much like an issue with your browser rendering things there. Have you tested this on another browser?

I use last Chrome version. But this is not sth new, has been happening even from v4. What browser are you using so I can test?

I have tested with chrome, firefox, and edge, and not seeing any issues with sidebar loading here

 

This also happens here, in invisioncommunity.

Which page?

I certainly know the issue, but the effect is only prominent when the existence of the sidebar depends on blocks rendered for specific user-groups not others, so I simply avoid that.

I see this happening here, for instance: https://invisioncommunity.com/forums/

Not always, but usually. Maybe a cache related thing. When it's not cached, I see fullwidth and then, the sidebar appears. Yes, it's almos invisible, but it happens...

When you say "Its almost invisible" Im not sure what you mean. Are you saying its a split second visual thing?

 

When you say "Its almost invisible" Im not sure what you mean. Are you saying its a split second visual thing?

Yes, it disappears/loads de sidebar in I don't know, 100ms?

Edited Friday at 12:25 PM5 days by Ibai

Unfortunately, this is not something which I can reproduce. Does this happen to you on other sites due to slow internet or other loading whether that being your connection or device?

This can be simulated by opening Chrome and slowing its CPU by 20x. I believe this is happening because browsers render code as soon as it's loaded. But in some cases, only a portion of the page code may have loaded, so the browser renders as much as it can. If the sidebar HTML hasn't loaded by this stage, the page won't render it because it technically doesn't exist yet. This issue was also in v4.

Here's a screenshot of a partially rendered page, which I simulated by slowing the CPU, refreshing and stopping the page load. This is at the very bottom of the page, and you'll notice that only a portion of a row has been rendered. There's also no sidebar, and no footer.

I don't believe we can determine the sidebars visibility until the sidebar content has loaded, because it may contain a huge variety of dynamic content (widgets which only appear on certain screen sizes, advertisements, content inserted via JS, etc).

To fix your advertisement solution, I'd suggest wrapping your ad code in a div which has a max-width set, like so:

<div style="max-width: 300px;">
	** ad code here **
</div>

I imagine that would prevent any large ads from appearing in places where they shouldn't.

 

This can be simulated by opening Chrome and slowing its CPU by 20x. I believe this is happening because browsers render code as soon as it's loaded. But in some cases, only a portion of the page code may have loaded, so the browser renders as much as it can. If the sidebar HTML hasn't loaded by this stage, the page won't render it because it technically doesn't exist yet. This issue was also in v4.

Here's a screenshot of a partially rendered page, which I simulated by slowing the CPU, refreshing and stopping the page load. This is at the very bottom of the page, and you'll notice that only a portion of a row has been rendered. There's also no sidebar, and no footer.

I don't believe we can determine the sidebars visibility until the sidebar content has loaded, because it may contain a huge variety of dynamic content (widgets which only appear on certain screen sizes, advertisements, content inserted via JS, etc).

To fix your advertisement solution, I'd suggest wrapping your ad code in a div which has a max-width set, like so:

<div style="max-width: 300px;">
	** ad code here **
</div>

I imagine that would prevent any large ads from appearing in places where they shouldn't.

Great description Ehren. Thats whats happening.

I consider my laptop not a slow one (I have a mbp), though I think maybe when there are a lot of items to load, eventually, i see this glitch.

Thanks for your advice, though i am rather interested in the primary column. Is there any css recommendation? Sth like max width calc ( 100% - 300px) would work?

Many Thanks!

Hi!

In case that you can see it happening, here for instance happens everytime.

Football Manager Español - FMSit...

Sin fm25, ahora que... Match Engine Chino?

buenos dias, este vació me genera unas ganas de jugar algo distinto que quizas alguien lo hizo o se hace y nunca estuve atento. este vació me da ganas de jugar con un universo paralelo al fm, que d...

Yeah, I see the issue. The same reasoning from earlier applies unfortunately.

The page simply hasn't loaded all of the code, and since the sidebar code exists after the main content, the page will only render the sidebar once the code exists. I don't have any solutions to improve this just yet, but I'll keep it in mind 👍