Bug 212130 – iframe is flashing through overlay element

• Status: NEW
• Component: Compositing

[Roland Soos]

Steps to reproduce:
1. Open https://smartslider3.com/bugs/webkit/iframeflash2/ on iPhone
2. Swipe your finger to the left
3. Watch the animation

Sometimes the iframe(YouTube embed) flickers through the covering image. 

Screen recording: https://www.youtube.com/watch?v=MgFmKVnDBrA  Happens at 0:07 and 0:09

Also a very similar issue, but I was not able to reproduce in a test environment, but I'm sure it is related. Watch this screen recording: https://www.youtube.com/watch?v=fyXZBhZdxlY
While I drag my finger on the screen at 0:03, the overlay image is invisible for a while and you can see the YouTube embed. This gets fixed after some point at 0:06 then it does not happen until the next drag.

If I added the following CSS to the overlay element, then this issue gets fixed.
.n2_ss_video_player__cover {
    transform: translate3d(0, 0, 0);
}

IOS 13.4.1

[Radar WebKit Bug Importer]

<rdar://problem/63453506>

[Roman A.]

Created attachment 402995 [details]
transition flickers

[Roman A.]

Issue are still relevant for latest webkit/safari

[Simon Fraser (smfr)]

I can reproduce.

Aside: That carousel would feel way better using scroll snap.

[Roman A.]

Bump