Bug 221261

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