Pointer events are not propagated to iframe (youtube player) for certain layout that has relative positioned div inside absolute div
Reported by
sokol1...@gmail.com,
Jun 20 2018
|
|||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
Example URL:
Added minimal html to reproduce
Steps to reproduce the problem:
Pointer events are not propagated to iframe (youtube player) for the following layout (minimal reproduction):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Bug">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bug</title>
</head>
<body style="width: 100%;
min-height: 100%;
margin: 0;">
<div style="position: absolute;
width: 100%;
height: 100%;">
<div style="width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
position: relative;">
<header style="display: flex;
min-height: 48px;
width: 100%;
z-index: 3;">
</header>
<main>
<div style="overflow:hidden;
border-radius:2px;">
<iframe style="width:500px;height:300px;"
src="https://www.youtube.com/embed/3eQP6JoxtKk?enablejsapi=1"
width="500px"
height="300px"
frameborder="0"
allowfullscreen></iframe>
</div>
</main>
<div id="red-bar" style="position:absolute;top:200px; left:540px; width:0; height:0;z-index:100;">
<div style="position: relative; width:50px;height:700px;background-color:red;">
</div>
</div>
<div style="opacity: 0;
visibility: visible;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 4;"></div>
</div>
</div>
</body>
</html>
The red bar on the right is the div that has absolute position on the page. The size of the div is as seen on page. Mouse clicks below the horizontal line of the div are not propagated to the youtube iframe as seen on the video.
The issue is very strange since for example by removing the "border-radius:2px;" from the div containing the iframe everything works as expected.
Or by removing the "position: relative" from the div inside the red bar solves the issue as well.
On other browsers (tested on Firefox and on Safari) there is no such issue, more over on older versions of chrome (starting from previous one) there is no issue as well.
What is the expected behavior?
Mouse clicks should work for the iframe.
What went wrong?
Pointer events are not propagated to iframe.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Did this work before? Yes all previous versions
Does this work in other browsers? Yes
Chrome version: 67.0.3396.87 Channel: stable
OS Version: OS X 10.13.4
Flash Version:
,
Jun 20 2018
Is the problem only with pointerevents or all the events? I mean do you get mouseevents but no pointerevents?
,
Jun 20 2018
All mouse events. Keyboard (using tab for navigation and enter for selection of buttons ) works
,
Jun 20 2018
Tested on Windows 10 as well, same behaviour (not specific to Mac)
,
Jun 20 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 20 2018
FWIW, I was not able to repro via https://jsfiddle.net/vbsj6tya/ (tried 69.0.3464.0 on Linux and 67.0.3396.87 on Linux and Mac), but I wonder if whoever can repro can try to see if the problem goes away after visiting chrome://flags#site-isolation-trial-opt-out, choosing "Opt-out (not recommended)," and restarting.
,
Jun 20 2018
Do you have the site isolation on by any chance? Sadrul, Ken, is this related to the hit-testing on the browser?
,
Jun 20 2018
I had it on default. tried setting it "Opt-out (not recommended)" and the issue is gone. So with the flag set to default the issue exists when setting to "Opt out" it goes away. Link with the html above to reproduce: https://staging-app.annoto.net/dev/pages/bug.html Thanks!
,
Jun 20 2018
I was referring to chrome://flags#site-isolation-trial-opt-out
,
Jun 20 2018
Adding Internals>Sandbox>SiteIsolation based on #c9
,
Jun 20 2018
,
Jun 20 2018
,
Jun 20 2018
I think this is likely the same as issue 851802 , which means it's probably fixed in Chrome 69 and the upcoming Chrome 68 beta (likely going out today). I can confirm that input events do not go to the video on Windows and Mac 67.0.3396.87. However, the bug goes away if you enable Viz Quad Hit Testing (by setting chrome://flags/#enable-viz-hit-test-draw-quad to Enabled), even with Site Isolation enabled. The bug is also fixed for the case that Viz Quad Hit Testing is disabled by r567500, which landed in 69.0.3461.0 and will be part of 68.0.3440.33 on Beta channel. Reporter: Can you try on Chrome Canary to verify the bug is fixed there? If so, we'll mark it a duplicate. Thanks!
,
Jun 20 2018
I can confirm that on Version 69.0.3466.0 (Official Build) canary (64-bit) the issue is solved. Issue not reproduced on clean install of Chrome Canary. When the fix would be released to stable? Thanks again!
,
Jun 20 2018
,
Jun 20 2018
Great, thanks! The fix will likely reach Stable channel as part of Chrome 68 around July 24 (https://www.chromium.org/developers/calendar). We also expect 68.0.3440.33 to reach Beta channel with the fix later today. (There's a chance the fix may get merged to Chrome 67 if there's a respin for another reason, but that's not currently planned.) I'll mark this as a duplicate of issue 851802 .
,
Jun 25 2018
Update: Chrome 67.0.3396.99 is now available on the stable channel with the fix. You can trigger an update manually by visiting chrome://chrome. |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by bokan@chromium.org
, Jun 20 2018Components: -Blink Blink>Input