Bug 221261 – clip-path over a position:fixed element breaks on orientation change

• Component: Compositing
• Status: NEW

[Tom Bigelajzen]

Created attachment 419005 [details]
bug recreation html

One of the ways to build a Parallax effect is to put a position:fixed element inside a an element with clip-path: inset(0) (or clip: rect(0,auto,auto,0) on some browsers).
This method works for us for several years now on millions of websites but lately we discovered that on iPadsOS/iOS it breaks on device rotation.
If I force a repaint of the clipping things get back to normal

I can't say when this regression started, also, it doesn't recreate on Xcode iPad Simulator

To recreate:
add a div, apply some height, overflow:hidden and clip-path: inset(0) on it
add a child div, apply height:100vh, width:100%, position:fixed and some background on it
open the page on an ipad and rotate the device causing an orientation change of the page

result:
the clipping disappears and the fixed element occupies the entire screen.

expected:
the fixed element should remain clipped.

working workaround (might be overkill):
on orientation change set the inner div to 'absolute' and than back to 'fixed' on setTimeout (promise or next animation frame didn't work for me)

a link to a minimal recreation: https://tombigel.github.io/clip-path-fixed/broken.html
a link to a minimal workaround: https://tombigel.github.io/clip-path-fixed/workaround.html

[Tom Bigelajzen]

Original issue was tested on iPad Pro with iOS 14.3
Checked on an iPad 6th gen. with iOS 14.2 and it Does NOT Recreate.

So might be a regression since 14.3

[Tom Bigelajzen]

Another update:
Upgraded both iPad and iPad Pro to 14.4 and the issue continues on the Pro but not on the Gen 6 iPad.

Might be just an iPad Pro issue? 
I also managed to see this happen on an iPhone XS when playing with pinch to zoom on the page.

The original user complaint i got just mentioned iPad and iOS 14.2, apparently it wasn't accurate enough...

[Simon Fraser (smfr)]

It seems pretty unlikely that this would only happen with some iPhone/iPad models.

[Radar WebKit Bug Importer]

<rdar://problem/74143638>