1462539 - [css-flexbox] flex items with negative margin (compensated for by positive padding) don't receive clicks

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. Load attached testcase.
 2. Try to click on the link.

EXPECTED RESULTS:
Link should be clickable.

ACTUAL RESULTS:
The link doesn't seem to receive click events -- the later flex item covers it up and receives the click events instead, it seems.

This was initially reported as https://github.com/webcompat/web-bugs/issues/16926 and the testcase is reduced from https://jsbin.com/zixukasatu/edit?html,css,output on that issue.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (using inline-block)

Hmm, this version (using inline-blocks instead of flexbox/flex-items) also reproduces the issue in Firefox, *and* in Chrome as well. So I'm less sure about this being a flexbox-specific bug (and about what the correct behavior is)...

Comment 2

[Daniel Holbert [:dholbert]]

Yeah, it seems that Edge agrees with us on both testcases, and Chrome agrees with us on testcase 2 at least, so I suspect this is expected/correct behavior, and the Chrome behavior on testcase 1 is just an accidental quirk.

--> resolving as invalid & setting needinfo=me to remind myself to file a bug on them tomorrow, with a testcase pointing out the inconsistency.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (using float)

Comment 4

[Daniel Holbert [:dholbert]]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=844505 on this issue in Chrome, with a testcase that makes the issue more obvious (with the negative-margin thing being an opaque div that nonetheless allows click events through it)