Update Cover Block background-attachment: fixed iOS bug handling to properly work with iOS 13+

[tomasztunik]

What?

Update @supportscheck disabling background-attachment: fixed for iOS devices to support latest versions of iPadOS and desktop mode.

Fixes #17718

Why?

The current solution was disabled when iPad Safari was rendering pages in desktop mode. Support for -webkit-overflow-scrolling: touch was removed in desktop mode in iOS 13 as mentioned in #17718

How?

As suggested in #17718 we change the @supports check from -webkit-overflow-scrolling: touch to -webkit-touch-callout: inherit

Testing Instructions

1. Create a new page with a Cover Block, set a background image and toggle the fixed background option.
2. View the page on an iPad (device or simulator).
3. Toggle between desktop and mobile views.

The block should render the same.

Currently, the block in desktop mode would render oversized as it would try to use backgorund-position: fixed but the parallax effect would not work.

(a smaller image might make the issue more apparent)

Screenshots or screencast

how to toggle	before	after

[paaljoachim]

Thanks for working on this @tomasztunik

I am not testing this correctly.
I have a physical Ipad beside me.
Went to this web site: https://opsalgard.no/
Uses the theme estar. Has various plugins activated.
Cover block with an image that has minimum height of cover 850.
Fixed background toggle is on.

It looks good on desktop view, but I am still having the problem at the iPad view.
I need to know how to cancel out the none working CSS code and instead add in the code that should work. I can then retest it out with the physical iPad.
Thanks!

[tomasztunik]

If you add this custom SCSS/CSS it should work.
For the test purpose added !important to make sure it overrides the current value.

scss

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

css

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

PS.
Also looks like an awesome place!

[paaljoachim]

Thank you for the code!

Before adding the CSS code

Before turning on "Fixed background"

After turning on "Fixed background"

After adding the CSS code to the customizer.

(Ignore the placement of the text. I was testing things with the Grid (Change content position)

The code works really well!
Thank you very much @tomasztunik

[paaljoachim]

The code works really well!
Thank you!

[paaljoachim]

@tellthemachines @talldan @ndiego
It would be nice to get this small CSS fix PR into WP 6.0.
Thanks!

[ndiego]

I do not have an iPad, but if we are confident in this fix, lets get it merged and we can consider for Beta 3

[tomasztunik]

For the issue here this is the only way to tackle it, it doesn't change the fix itself just changes how we detect the platform which is backwards compatible with older iOS versions. I think as it was around since iOS 13 it would be worth getting it in.

[adamziel]

I cherry picked this change into wp/6.0 branch to be included in WordPress 6.0 Beta 4 on Monday: 01df2a5