Grey band when scrolling down with Ethos stack

[markwest]

Hi,

I’m just finishing up the following site - http://taniayoung.co.uk based on the Ethos 2 demo - http://demo.theme.co/ethos-2/

However, when scrolling down the page (usually only on initial load) you can see a grey band at the bottom of each gallery image, almost like a FOUC. This doesn’t appear on the demo site, but I can’t figure out what it is.

I’d be grateful if someone could take a look and help me figure it out to make it perfect for the client

Thanks for your help

Mark

[paul.r]

Hi Mark,

Can you provide us a screenshot, it is showing up on my end.

Thanks

[markwest]

Hi Paul,

I assume you mean it is NOT showing up for you?

It’s almost impossible to screenshot as it happens one first page load as you scroll down. At the bottom of all of the parallax gallery images - just as the bottom edge comes on screen before the next image - a quick grey band can be seen. It’s only there for a very short time and only seems to be on first load.

But it doesn’t happen on the Ethos demo site.

You will see it if you visit the site (having cleared your browser cache) http://taniayoung.co.uk and then scroll down - if you scroll slowly it is a little less noticeable - but if you scroll reasonably quickly you will see it.

I hope you are able to see the issue and help me resolve.

Thanks

Mark

[rahul]

Hey Mark,

Hope you are doing great

I think you are facing the issue because of website loading speed. Your website page size is 20MB where as our demo website size is 2MB.

You are seeing a grey band because the moment you scroll your website the images are still in loading state on initial load and as images are partially loaded the grey background is visible. While in our ethos demo site the images loads much faster If you scroll our demo site before it is completely loaded(or in loading state) then you can see the white background in gallery.

The reason why your gallery images takes time to load is because of image size. We have used optimized images for our gallery. The sizes are upto 160KB where as your website’s image sizes are 500KB to 1.2MB.

Optimize/Compress all gallery images for faster load. Loading speed also depends on server environment and number of plugins you are using.

Here you can compare website size :

1. https://tools.pingdom.com/#!/beW7Xp/http://taniayoung.co.uk/
2. https://tools.pingdom.com/#!/uPNe3/http://demo.theme.co/ethos-2/

Hope this helps.

Regards