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 Disable fixed cover attachment on iOS #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.

[jasmussen]

It is possible that #32824 has fixed this issue. If anyone is able to test the latest trunk, we might be able to close this one.

[Robertght]

I'm not sure if it's the same issue, but I noticed this might be the same thing: Automattic/wp-calypso#57390

I tested it on my iPad with Safari 15 and macOS Catalina and the zoomed-in images are still showing up.

Example: http://rockfielddemo.wordpress.com

cc @jasmussen

[jasmussen]

Thanks for the ping. So it sounds like the mobile safari bug is back. I don't have bandwidth to look right at the moment, but anyone else should be free to pick this one up.

[paaljoachim]

I was told that this site when checked on the Ipad (perhaps also iPhone) just showed a blue sky (seems zoomed in) instead of the regular image. https://opsalgard.no/

It uses the Cover block with a fixed image.

[paaljoachim]

I tried the fix mentioned by @depthoffocus but from what I see it is not working.
If anyone has a newer fix (should work with Ipad version 15.1) do please add it here (or add a link to a fix).
Thanks!

[tomasztunik]

@paaljoachim - I've just tested the fix with -webkit-touch-callout: inherit on iPad 15.2 (and 15.0 - don't have older versions) Simulator and can confirm it is working. Can you please confirm it was still broken for you after following the testing steps I've provided in the PR?

If there is another scenario where this fix doesn't work let me know!

[paaljoachim]

Great!
I have tested the PR and added a comment.
It is now working.

It would be great if others could also test it out.
But I think we can likely just merge it based on my feedback of the working CSS.