WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 7 months 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:

Description

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
7 months ago

Just a short Update, still applies for 4.9

#2 @apermo
7 months 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.