Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#42544 new defect (bug)

Background Image Cover on iOS not correctly displayed

Reported by: apermo Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.8.3
Component: Customize Keywords:
Focuses: template Cc:
PR Number:


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)

Change History (2)

#1 @apermo
2 years ago

Just a short Update, still applies for 4.9

#2 @apermo
2 years ago

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.

Note: See TracTickets for help on using tickets.