[Webkit-unassigned] [Bug 221261] New: clip-path over a position:fixed element breaks on orientation change

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=221261

            Bug ID: 221261
           Summary: clip-path over a position:fixed element breaks on
                    orientation change
           Product: WebKit
           Version: Safari 14
          Hardware: iPhone / iPad
                OS: iOS 14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: tombigel at wix.com
                CC: simon.fraser at apple.com

Created attachment 419005

  --> https://bugs.webkit.org/attachment.cgi?id=419005&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210202/d1d99a5e/attachment.htm>