White bar on mobile scroll... mysterious

[SpringBayMill]

Hi there,

I’ve just started the final testing of my site squidfest.com.au before starting promotion… and have discovered an annoying little bug that I can’t figure out.

The current homepage consists of a revolution slider header and a pro-built footer, and nothing else. No menu or body content. It displays great on desktop / laptops, however on certain mobile browsers (Chrome and Safari namely), there is an irritating white bar that appears at the bottom when scrolling.

The bar seems to be the same height as the browser’s address bar, if that’s a clue. I’ve disabled headers, changed background colours, tried lots of things but nothing has any effect.

Any advice would be much appreciated!

Thanks, Matt.

[tristup]

Hi Matt,

Thanks for reaching out.
I have checked the site on my Android mobile device but didn’t find the issue you described here. Can you please provide any screenshot marked with the issue or any video that helps us to recognize the problem? Also please mention the device, browser version, and also the operating system you are using, which helps us to replicate the issue at our end.

Thanks

[SpringBayMill]

Hi Tristup,

I’ve recorded my mobile screen illustrating the problem, the link is here.

As for the operating system, I’m using a Samsung S10, Chrome browser v. 104.0.5112.97. (latest) I’m not sure of the iPhone / safari version tested earlier, but it showed the same issues.

Thanks,

Matt.

[christian]

Hey Matt,

I believe this boils down to the phones performance. Samsung S10 cannot handle the advanced effects of Slider Revolution. I do not see the white bar in newer phones. And, this is not a theme issue.

If the white bar is a major concern, unfortunately, you should not use Slider Revolution or at least do not use scrolling effects.

Thank you for understanding.

[SpringBayMill]

Hi Christian,

Hmmm… are you sure it’s a performance issue? As you’ll see from the video the scroll effect works perfectly fine, and the rest of the page eventually scrolls up to fill the white gap, which is what makes it look so obvious and bad.

Is there perhaps some global CSS that forces all backgrounds across the entire site to be black instead of white or transparent? That could be a workaround, to at least see if it has any effect…

Cheers,

Matt.

[christian]

Hey Matt,

Yes. Your Slider Revolution setup is heavy for a mobile browser.

Regarding setting the site background to black. You’re using the Renew Stack which has a fixed background of white, you might want to switch to Integrity Black. Or, use the Layout Builder to have complete control over your page’s design.

Overriding the Renew Stack’s background using CSS is simple for us. However, in our years of experience on the forum, providing custom codes encourages users to rely on us to customize their sites rather than using the theme features. That in turn floods the forum with customization requests and in turn, increases our response time which is not good for both customers and support staff. Providing custom codes is beyond the scope of theme support in the first place.

With that said, if you want to customize the theme using CSS, I’d recommend you learn CSS and learn how to inspect an element using the browser’s dev tools. Once you’re in the browser’s inspector, you can see the code that you need to override.

You can put the override code in one of Pro’s Code Editors.

Thanks.