[wp-trac] [WordPress Trac] #42544: Background Image Cover on iOS not correctly displayed

[WordPress Trac]

#42544: Background Image Cover on iOS not correctly displayed
--------------------------+-----------------------------
 Reporter:  apermo        |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:  4.8.3
 Severity:  normal        |   Keywords:
  Focuses:  template      |
--------------------------+-----------------------------
 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)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42544>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform