Fixed Cover Images on iOS fail

[weavertheme]

Issue Overview

Issue: iOS devices don't play well with background-attachment: fixed used for fixed Cover Images (parallax). Android devices work fine, but iOS devices just show some tiny piece of the background image, so it is really ugly.

Steps to Reproduce (for bugs)

1. View a fixed cover image on an iOS device with a largish image. It will be ugly.

Possible Solution

What is needed is a new CSS rule based on knowledge of iOS, something like:

.is-ios .wp-block-cover-image.has-parallax {  /* change from fixed to scroll on iOS */
    background-attachment: scroll;
}

At the least, this should be documented as a known problem with iOS. It isn't unique to Gutenberg, but needs to be handled because there are a lot of iOS devices.

A documentation solution is something like this (based on Customizer code):

In the body_class filter, add a body class for iOS, like this:

if ( wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] ) )
    $classes[] = 'is-ios';

and add a rule to the theme's block css file.

Gutenberg could also standardize on is-ios or ios (as in the customizer), and add the above scroll rule to the Gutenberg block css, and let the theme add the is-ios. This doesn't solve the problem for all the non-gutenberg-supporting themes, however.

And maybe WP core needs to standardize on an iOS class to always add to the body as needed.

[weavertheme]

Someone emailed me that a server-side solution based on wp_is_mobile() will fail on cached pages. That seems true, but the issue remains.

My own theme adds the is-ios via JavaScript, which would solve the cached pages issue. But that is more complicated, but I agree the wp_is_mobile() solution would not work well.

[mtias]

Duplicate of #4133.