Gutenberg: Cover Block: Fixed background problem in iPadOS 13.x Safari

[depthoffocus]

iPadOS now defaults to a 'Desktop' view in the browser on (all?) iPad devices, which suffers from the problem with Safari's handling of background-size: cover and background-attachment: fixed.

According to Apple's Safari 13 release notes, in iPadOS they have:

Disabled -webkit-overflow-scrolling: touch on iPad.

However, it appears not to be that simple. They have disabled it in the "desktop" mode, but seemingly still provide it it if you request the "mobile" site.

The absence of this webkit-only feature means that the CSS implemented in #11480 that sets background-attachment: scroll no longer works in the default iPadOS browser view:

@supports (-webkit-overflow-scrolling: touch) {
    .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
        background-attachment:scroll
    }
}

To reproduce

1. Go to a page with a fixed background cover block above a lot of content
2. The background image will be blurry and stretched like it was before #11480
3. Choose "Request Mobile Website"
4. The fix behaviour is restored

(Tested with Gutenberg 6.5.0)

Expected behavior

Ideally the existing mobile Safari behaviour should be preserved, since background-attachment: fixed is still not correctly supported.

Smartphone (please complete the following information):

• Device: iPad Pro 10.5"
• OS: iOS 13.2
• Safari

_(Edited for clarity. Apologies for any dimwittedness -- this is my first ever github issue!)_

[depthoffocus]

As a potential fix, the best alternative property to test with @supports appears to be -webkit-touch-callout: inherit:

(-webkit-touch-callout on developer.mozilla.org)

So this is working for me:

.wp-block-cover.has-parallax, .wp-block-cover-image.has-parallax {
  @supports (-webkit-touch-callout: inherit) {
    background-attachment: scroll;
  }
}

[zdenys]

This is still an issue and lately, we have had a few reports on WordPress.com too.

[depthoffocus]

@zdenys I have now moved on from the project where I encountered that issue, but I believe my alternative CSS property test check is working fine.

[jeroenrotty]

Just saw this on a 5.5.1 site too that was previously okay. The snippet didn't work for me though. Still bugged on iOS Safari (latest)

[charlesjayway]

Happening for me too, WP 5.5.1, GeneratePress theme. iPad OS 14.01. Any new fixes?

[jeroenrotty]

I learned that (mobile) Safari has difficulties with parallax backgrounds so I disabled that as a workaround.

[charlesjayway]

@jeroenrotty disabled parallax for all users, or selectively on iPad somehow? If you have a working bit of CSS (that works on latest versions of WP and iPad OS) could you share it here? Thx.

[jeroenrotty]

Hehe I tried doing it selectively with a @support rule I found online, but that didn't really work for me at the time (didn't have much time for this), so it's disabled for on all devices for now.