1342173 - Button label covered by overlapping element is visible but not clickable

Status: VERIFIED DUPLICATE of bug 1089326

(Core :: Layout, defect, P3)

Description

[Dennis Schubert [:denschub]]

Attachment: Button overlapped by a div

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

[Mats Palmgren (inactive)]

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?

Comment 2

[Dennis Schubert [:denschub]]

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. :/

Comment 3

[Mats Palmgren (inactive)]

> 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"?

Comment 4

[Dennis Schubert [:denschub]]

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.

Comment 5

[Daniel Holbert [:dholbert]]

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)

Comment 6

[Daniel Holbert [:dholbert]]

(Dennis, if you could confirm to be sure I'm not missing something, I'd appreciate it - thanks!)

Comment 7

[Dennis Schubert [:denschub]]

Indeed, this has been fixed and the behavior seems to match Chrome now. Thanks for checking back. :)