Make WordPress Core

Opened 6 years ago

Closed 4 years ago

#42544 closed defect (bug) (invalid)

Background Image Cover on iOS not correctly displayed

Reported by: apermo's profile apermo Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Customize Keywords: reporter-feedback
Focuses: Cc:


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 (4)

#1 @apermo
6 years ago

Just a short Update, still applies for 4.9

#2 @apermo
6 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( );
	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.

#3 @dlh
4 years ago

  • Focuses template removed
  • Keywords reporter-feedback added
  • Version 4.8.3 deleted

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

#4 @dlh
4 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Closing for lack of feedback.

Note: See TracTickets for help on using tickets.