Closed
Bug 1342173
Opened 8 years ago
Closed 6 years ago
Button label covered by overlapping element is visible but not clickable
Categories
(Core :: Layout, defect, P3)
Core
Layout
Tracking
()
VERIFIED
DUPLICATE
of bug 1089326
People
(Reporter: denschub, Unassigned)
References
Details
(Whiteboard: [webcompat])
Attachments
(1 file)
(deleted),
text/html
|
Details |
If you have a <button> overlapped by another element, the button's label is visible but not clickable. In Edge, IE, Safari and Chrome, you can both see and click the label. I've attached a simple test case explaining the situation maybe a bit clearer.
Since we received a report about a button in Outlook Web not being clickable because of this, it might be good to mimic the other's behavior here and make the label clickable as well.
Comment 1•8 years ago
|
||
What's weird about the behavior in other UAs though is that it's only the text
that is clickable, not the cyan background next to it.
The site can easily fix this by adding 'pointer-events:none' to the overlapping <div>.
That makes the full extent of the button clickable.
Dennis, could you file a separate Tech Evangelism bug to ask the site to add
'pointer-events:none' to fix this?
Flags: needinfo?(dschubert)
Reporter | ||
Comment 2•8 years ago
|
||
Thanks! We already have bug 1339527 in Tech Evangelism for communicating a workaround for this. `pointer-events: none;` wouldn't work in this case, since there are other buttons inside the overlapping divs that need to be clickable - it's a bit of a mess. :/
Flags: needinfo?(dschubert)
Comment 3•8 years ago
|
||
> since there are other buttons inside the overlapping divs that need to be clickable
So 'pointer-events:none' would make them clickable too, right?
Or did you mean to say "need to be NOT clickable"?
Reporter | ||
Comment 4•8 years ago
|
||
Sorry, that was maybe unclear, since the test case is a simplified version.
The originating site has buttons inside the cyan div *and* before it, like the button in the example. When I add `pointer-events: none;` to the overlapping div, the "outside button" is clickable, yes, but the buttons/links inside the div are no longer clickable. We'll suggest moving the overlapped button up one z-layer since there is nothing else on the same position, that would solve the issue.
Updated•8 years ago
|
Updated•7 years ago
|
Priority: -- → P3
Reporter | ||
Updated•6 years ago
|
Flags: webcompat?
Comment 5•6 years ago
|
||
This is fixed in Nightly now. Fix range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=f6eebcc14c22762f521fb567a9588963b8720592&tochange=61570c16c2d564c24fab36713fb169c4144453e9
--> likely a dupe of bug 1089326 (seems like the most likely fix in that range)
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
Comment 6•6 years ago
|
||
(Dennis, if you could confirm to be sure I'm not missing something, I'd appreciate it - thanks!)
Flags: needinfo?(dschubert)
Reporter | ||
Comment 7•6 years ago
|
||
Indeed, this has been fixed and the behavior seems to match Chrome now. Thanks for checking back. :)
Status: RESOLVED → VERIFIED
Flags: needinfo?(dschubert)
You need to log in
before you can comment on or make changes to this bug.
Description
•