:hover and :focus styles incorrectly applied for elements within <iframe> (when pressing the menu key) |
|||||||||||||||||||||
Issue description
Version: 49.0.2623.110 as well as my own build 52.0.2710.0
OS: linux, chromeos (and probably other desktop systems)
What steps will reproduce the problem?
(1) Open a webpage with an <iframe> with links with both :hover and :focus selectors (such as the new tab page and its 8 most used icons).
(2) Repetitively Press TAB to focus the link within the <iframe> - it has :focus styles applied
(3) Press the menu key when your mouse is outside the <iframe>.
What is the expected output?
The :hover styles of the link are applied for a split of a second (emulating the right click), afterwards the :focus styles of the link are applied. This is how it works if the mouse pointer is within the <iframe>
What do you see instead?
The :hover styles of the link are applied.
This stays even if you close the context menu (by hitting ESC or clicking outside the <iframe>). The styles get fixed only when you move your mouse back into the <iframe>.
On chromeOS the behaviour is slightly different, still wrong. The :hover styles are applied even if the mouse pointer is within the IFRAME as long as the context menu is open
A minimal example code below (and also at www/~jkrcal/test.html):
- test.html:
<!DOCTYPE html>
<html lang="en-US">
<iframe src="iframe.html" style="width:600px; height: 400px; border: 1px solid black">
</iframe>
- iframe.html:
<!DOCTYPE html>
<html lang="en-US">
<style>
a:focus:not(:hover) {
background-color: green;
}
a:hover {
background-color: red;
}
</style>
<a class="test" href="#">Press TAB to focus here</a>
<p>When focus on the link, press the context menu key on your keybard.
<p>Try first with your mouse within the IFRAME box. The green link turns red for a split of a second and then again turns green. This is the desired behaviour.
<p>Then, try it with your mouse outside the IFRAME. The link stays red and the text even disappears. This is the bug. It turns green only after you move your mouse back into the IFRAME.
,
Apr 19 2016
,
Apr 19 2016
Tested it on Chrome 50 and Chrome 52 on Mac
,
Aug 10 2016
Attempted to make clickable repro: https://jsfiddle.net/rrt84wcf/show/ but I don't think i have a context-menu key. @nainar, does this still happen? If so, needs bisect.
,
Aug 10 2016
It still happens. I am a bit puzzled by your example. The link with the :focus styles needs to be in the iframe. It actually is - the whole gray area below the white top bar "Result ... Edit in JSFiddle" is an iframe. When testing with the mouse outside, you need to place the pointer on the white top bar. The inner iframe (iframe.html) is superfluous.
,
Aug 11 2016
Can repro using the link here: www/~jkrcal/test.html Sending over for Bisect
,
Aug 12 2016
@nainar: Could you please have a look at the attached video and let us know if this is the correct procedure to perform the test. Since observing the same behavior on Chrome Version M30 - # 30.0.1549.0 as well. And, not able to access the URL provided in the comment #6 [Looks like the link is incorrect] @jkrcal: Could you please provide us the sample file along the the expected result, which would help us in triaging it further. Thank you.
,
Aug 12 2016
The two sample files are in the original post:
test.html:
**********
<!DOCTYPE html>
<html lang="en-US">
<iframe src="iframe.html" style="width:600px; height: 400px; border: 1px solid black">
</iframe>
iframe.html:
************
<!DOCTYPE html>
<html lang="en-US">
<style>
a:focus:not(:hover) {
background-color: green;
}
a:hover {
background-color: red;
}
</style>
<a class="test" href="#">Press TAB to focus here</a>
<p>When focus on the link, press the context menu key on your keybard.
<p>Try first with your mouse within the IFRAME box. The green link turns red for a split of a second and then again turns green. This is the desired behaviour.
<p>Then, try it with your mouse outside the IFRAME. The link stays red and the text even disappears. This is the bug. It turns green only after you move your mouse back into the IFRAME.
,
Aug 12 2016
Hi, Sorry I just realized the link the reporter provided is internal only which would explain why you can't use it to repro. The instructions for repro are: Press The context menu key (the menu key on the right side of the space bar after the Alt). Try first with your mouse within the IFRAME box. The green link turns red for a split of a second and then again turns green. This is the desired behaviour. Then, try it with your mouse outside the IFRAME. The link stays red and the text even disappears. This is the bug. It turns green only after you move your mouse back into the IFRAME.
,
Aug 16 2016
Able to repro this issue on Windows 7, MAC (10.11.6) & Ubuntu Trusty (14.04) for Google Chrome Stable Version - 52.0.2743.116 & Canary Version - 54.0.2829.0 This is a Non-Regression issue existing from M30 - # 30.0.1549.0
,
Aug 16 2016
,
Aug 16 2016
,
Feb 13 2017
,
Jul 24 2017
Raising the priority as it affects the UI of the New Tab Page on desktop (crbug.com/568488). Feel free to re-prioritize.
,
Oct 11 2017
,
Oct 30 2017
,
Oct 31 2017
Don't really know how to repro because I don't have a context menu key. Marking as HardBug because of this.
,
Nov 27 2017
Is there no keyboard around that has a context menu key? (for reference, I have an ergonomic keyboard by Microsoft, that's why I have the context menu key)
,
Dec 6 2017
,
Dec 6
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Dec 12
|
|||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||
Comment 1 by jkrcal@chromium.org
, Apr 18 2016