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)
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-05-20 02:19 PDT by Roland Soos
Modified: 2020-10-01 09:06 PDT (History)
6 users (show)

See Also:

Attachments
transition flickers (400.87 KB, video/quicktime)
2020-06-28 08:10 PDT, Roman A. 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

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 
<rdar://problem/63453506>
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 
Bump