Bug 212130 - iframe is flashing through overlay element
Summary: iframe is flashing through overlay element
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Simon Fraser (smfr)
Keywords: InRadar
Depends on:
Reported: 2020-05-20 02:19 PDT by Roland Soos
Modified: 2020-10-01 09:06 PDT (History)
6 users (show)

See Also:

transition flickers (400.87 KB, video/quicktime)
2020-06-28 08:10 PDT, Roman A.
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Roland Soos 2020-05-20 02:19:51 PDT
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
Comment 1 Radar WebKit Bug Importer 2020-05-20 10:30:45 PDT
Comment 2 Roman A. 2020-06-28 08:10:07 PDT
Created attachment 402995 [details]
transition flickers
Comment 3 Roman A. 2020-06-28 08:11:11 PDT
Issue are still relevant for latest webkit/safari
Comment 4 Simon Fraser (smfr) 2020-06-30 09:57:49 PDT
I can reproduce.

Aside: That carousel would feel way better using scroll snap.
Comment 5 Roman A. 2020-10-01 09:06:24 PDT