Background Image Cover on iOS not correctly displayed

[apermo]

Steps to reproduce:

Define a background image
Set background preset to: fill (css: background-size cover; background-attachement: fixed; )
Test a site with "long" content (at least several screen heights) on an iOS device (needs to be real device, not Chrome preview)

You will now see a distorted background image, if the content is long enough (archive page of blog with show full content enabled for example), you will barely see the image, as the pixels will be huge.

Reason: iOS uses the body height and not just the viewport height to calculate the size for the cover image.

Possible solution: Add a div with 100vw, 100vh, instead of using body. Not sure if ::after or ::before would work as well.

Tested with: Storefront on iPhone and iPad (both iOS 11)

[apermo]

Just a short Update, still applies for 4.9

[apermo]

i have added the following code to my style.css

body::after {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	height: 100vh;
	width: 100%;
	width: 100vw;
	background: #cccccc;
	background-size: cover;
	background-position: center center;
	background-image: url( http://path.to/wp-content/uploads/2017/11/file.jpg );
	z-index: -1;
}

The drawback of this would be that this breaks every other usage of ::after on body. The advantage, that it does not need any new html code.

[dlh]

Hi @apermo! Are you still able to replicate this issue with a default theme? If so, which theme(s)?

[dlh]

Closing for lack of feedback.