Bug 221261 - clip-path over a position:fixed element breaks on orientation change
Summary: clip-path over a position:fixed element breaks on orientation change
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad iOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-02-02 08:50 PST by Tom Bigelajzen
Modified: 2021-02-09 08:51 PST (History)
5 users (show)

See Also:


Attachments
bug recreation html (1.69 KB, text/html)
2021-02-02 08:50 PST, Tom Bigelajzen
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tom Bigelajzen 2021-02-02 08:50:47 PST
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
Comment 1 Tom Bigelajzen 2021-02-02 22:19:09 PST
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
Comment 2 Tom Bigelajzen 2021-02-03 00:20:08 PST
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...
Comment 3 Simon Fraser (smfr) 2021-02-03 08:52:21 PST
It seems pretty unlikely that this would only happen with some iPhone/iPad models.
Comment 4 Radar WebKit Bug Importer 2021-02-09 08:51:53 PST
<rdar://problem/74143638>