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)

defect

Tracking

()

VERIFIED DUPLICATE of bug 1089326

People

(Reporter: denschub, Unassigned)

References

Details

(Whiteboard: [webcompat])

Attachments

(1 file)

Attached file Button overlapped by a div (deleted) —
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.
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)
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)
> 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"?
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.
Priority: -- → P3
Flags: webcompat?
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
(Dennis, if you could confirm to be sure I'm not missing something, I'd appreciate it - thanks!)
Flags: needinfo?(dschubert)
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.

Attachment

General

Created:
Updated:
Size: