Header layout shifts as pages load

[John Ennals]

Happy New Year!

On my Swift V2 site, the mega menu bar and everything above it (company logo etc.) appears to "twitch" a few (maybe 10-15) pixels to the right while pages are loading, which is not very pleasing to the eye. I think what's actually happening is that the contents of the header area are loading offset to the right, then snapping back into their correct positions when the rest of the page has loaded. Sometimes pages load smoothly (due to the browser cache?) but more often than not they twitch.

• The issue occurs in Chrome and Edge Windows browsers, but not in Firefox.
• The same thing happens on most, but not all, other Swift websites I've looked at, including Sellerdeck's own demo site.

Please can anyone suggest how to fix this? If I could just make the logo stay put when moving from page to page it would be a big improvement.

Many thanks,
John

[Mike Hughes]

Happy new year John,

I think this is probably a CSS layout shift on your cart image. It looks to me as if Actinic.css is adding a 10px padding right to the image and this only happens when the CSS file is finally loaded and the page redrawn.

A brute force solution would be to add the padding right to the page's HTML. There might be a tidier option and you could always inspect the Sellerdeck demo site and see how their cart image layout compares to yours.

Mike

[John Ennals]

Hi Mike,

Thank you for having a look at this. I was thinking along the same lines for a solution, but unfortunately the problem seems to be less tractable and not associated with any specific element in the header. Sellerdeck's demo site exhibits the same behaviour.

The issue is only noticeable in Chromium-based browsers like Chrome and Edge, and then not on every page load. The shift is not apparent in Firefox, but it may still be happening, only faster. I assume Firefox has a fundamentally different mechanism for loading pages.

I'm wondering whether it is to do with the general slowness of Swift, and in particular the time it takes the browser to load the custom fonts? The FOUT (Flash Of Unstyled Text - another new term I've learned today) causes a significant amount of layout shift, but is appreciably quicker in Firefox than in Chrome or Edge.

Anyway, I take comfort from the thought that my customers probably find it a lot less annoying than I do!

John

[graphicz]

It doesn't seem to shift if you use Font Awesome: try https://www.graphicz.co.uk/sellerdec...tv2/index.html

<div class="img-sec">
<i class="fa fa-shopping-bag"></i>
</div>

versus

<div class="img-sec">
<img src="acatalog/cart-icon-theme.png" alt="">
</div>

Needs a bit of style:

.header-cart i {
color: <actinic:variable name="PaletteBG" />;
font-size: 34px;
}

Font awesome is added thus: https://www.w3schools.com/icons/font...cons_intro.asp

Cheatsheet here: https://fontawesome.com/v4/cheatsheet/

[John Ennals]

Hi Jonathan,

Thank you for this - I'll try it over the weekend.

John

[John Ennals]

I think I was barking up the wrong tree with the fonts (sorry!)

On every Swift site I've visited on a PC using Edge or Chrome, including Sellerdeck's and Jonathan's sample sites, the content of the header area twitches to the right when a page is refreshed or loaded. Not every time, but more often than not. However, there is no twitch when using Firefox.

I've tried creating a blank page, stripping out everything except the header and footer (i.e. Inner Layout, New Products List and Recent Products List), and the twitch goes away. But if I add any one of those elements back in, the problem reappears. It appears that the header content is displaced to the right until the bulk of the page has loaded, then it shifts back to the left.

HOWEVER...
there is one notable exception: https://www.titanjewellery.co.uk/. That site's header does not twitch in Edge or Chrome. I can't for the life of me work out why, which is frustrating. Maybe magic sauce is involved?

John

[Buzby]

Hi John,

having read this thread earlier I did test my site and couldn’t see the problem. Now explains why if you say I don’t have it.

Titan Jewellery uses an early version of Swift V1 with modified Menu, and lots of bits removed or changed.

I am not aware of anything I have done that has made me exempt from this, however if you want to examine any of my layouts let me know and I can get the code for you. It may help you find the issue.

Edit: I remember spending a lot of time trying to iron out cumulative shift. I have asynchronous loaded some of the page. In addition if something isn’t needed on a page I have stopped it loading using true or false custom variables which can be turned on and off per page. I think this is where you need to look. Again, happy to show my code.

[John Ennals]

Hi Jason,

Thank you for these suggestions, I will continue to experiment.

John

[Buzby]

I did a test upgrade to V18.2.3 and Swift V2 yesterday.

Apart from Swift V2 making a total mess of my site, it also introduced that shift of the shopping cart icon, so I can confirm it is also in the new releases.

If I upgrade to V18.2.3 and do not upgrade Swift, then my site is staying as is, so I think this is the way forward for me.

[John Ennals]

Problem solved!

The issue is related to the vertical scrollbar. Some browsers, including Edge and Chrome, hide the scrollbar for shorter pages. When a Sellerdeck Swift page loads, because it's so ****ing slow, the browser initially thinks it's dealing with a short page and hides the scrollbar, then adds the scrollbar when the bulk area of the page loads. Hence the horizontal "twitch" as the page adjusts to accommodate the scrollbar.

The twitch may not be noticeable if your site has super-fast hosting, or if you've taken other steps to improve page load speed, as I believe Jason has.

The solution is to force the scrollbar to appear for all pages, just by adding this to your stylesheet:

html {
overflow-y: scroll;
}

Here is a useful article about it:
https://aykevl.nl/2014/09/fix-jumping-scrollbar

Note: the shift in the cart icon and total is a different issue - one I can live with!

John