Mobile footer background sometimes glitchy

[nothin7]

Sometimes an empty grey or white bar appears below the footer on my iPhone X. Screenshot: https://share.getcloudapp.com/QwuQ41o0

I notice this about half of the time I load the following pages:

https://arisefestival.com/colorado-festival-information/

ARISE Music Festival | August 2-4, 2019

Interestingly, I don’t notice it on the following page:

DAILY LINEUPS - ARISE

I’m running the latest version of WordPress, Theme X, and Cornerstone. I’ve replicated this in a Safari Private window as well as Chrome for iOS.

Can you help me figure out why this is happening and how to avoid it?

Thanks!

[christopher]

Hi Robert,

This is a performance issue with the iPhone and in general mobile browsers when they want to render the gradient backgrounds.

You can test that by going to X > Theme Options > CSS and change the code that you have added for the .x-colophon.top, .x-colophon.bottom CSS selector and add a solid background color. Then you will see the problem goes away.

Most of the time the problem happens when you scroll and keep your finger after the scroll ends. This is a performance issue.

I suggest that you have a solid background color both for the footer and the main background of the website. The gray line is the problem of the footer background gradient, and the white line is the problem of the main website background gradient.

You can alternatively use the CSS Media Queries to have a solid color for mobile devices and gradient for desktop. Here is an example for the footer:

.x-colophon.bottom {
	background: rgba(15,23,42,0.7);
}

@media (min-width: 979px) {
	.x-colophon.bottom {
	    background: rgba(15,23,42,0.7);
	    background: -moz-linear-gradient(left,rgba(15,23,42,0.7) 7%,rgba(26,26,40,0.7) 46%,rgba(33,27,39,0.83) 69%,rgba(33,27,39,1) 100%);
	    background: -webkit-gradient(left top,right top,color-stop(7%,rgba(15,23,42,0.7)),color-stop(46%,rgba(26,26,40,0.7)),color-stop(69%,rgba(33,27,39,0.83)),color-stop(100%,rgba(33,27,39,1)));
	    background: -webkit-linear-gradient(left,rgba(15,23,42,0.7) 7%,rgba(26,26,40,0.7) 46%,rgba(33,27,39,0.83) 69%,rgba(33,27,39,1) 100%);
	    background: -o-linear-gradient(left,rgba(15,23,42,0.7) 7%,rgba(26,26,40,0.7) 46%,rgba(33,27,39,0.83) 69%,rgba(33,27,39,1) 100%);
	    background: -ms-linear-gradient(left,rgba(15,23,42,0.7) 7%,rgba(26,26,40,0.7) 46%,rgba(33,27,39,0.83) 69%,rgba(33,27,39,1) 100%);
	    background: linear-gradient(to right,rgba(15,23,42,0.7) 7%,rgba(26,26,40,0.7) 46%,rgba(33,27,39,0.83) 69%,rgba(33,27,39,1) 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f172a',endColorstr='#211b27',GradientType=1 );
	}	

}

Thank you.