Bug 226462 – Clip path fails to work sometimes

• Component: Layout and Rendering
• Status: NEW

[Roland Soos]

Created attachment 430188 [details]
iPhone 11 screen recording

Steps to reproduce:
1. Open https://smartslider3.com/bugs/webkit/clippath/?3
2. Touch an drag the colored area upward to switch slides 
3. If the clipping issue does not appear rotate the device from portrait to landscape or landscape to portrait. 

What's went wrong?
The frame (guy's back), the watch image and framed mountain should be clipped at the bluish background by clip-path, but they sometime are visible over the greenish slide.

Expected result:
All image should be clipped where the two background color meet.

Able to reproduce on iPad 7th gen ( IOS 14.5.1) and iPhone 11 (IOS 14.6).

This issue happens more often if you open https://smartslider3.com/photo-app-slider/ and switch from second to third slide. In this case the portrait/landscape switch is not needed.

The following element has the clip path:
.n2-ss-full-page--constrain-ratio .n2-ss-layers-container {
    clip-path: var(--ss-clip-path, inset(0px));
}

and the --ss-clip-path variable adjust over time with the following syntax: inset(-[varies]px 0px -[varies]px 0px)

[Radar WebKit Bug Importer]

<rdar://problem/78721399>

[Simon Fraser (smfr)]

Did this bug happen in older iOS releases?