Looks like the float: left on the checkbox makes it go behind the overlapping element.

float: left is added by bootstrap css.  Something changed in Chrome recently where this behavior changed.  

The problem is the "margin: -20px" on the checkbox, which moves it behind the floating label, which is consuming the click.

It's not clear to me that this is a bug. Let's see what the bisect has to say about why the behavior changed.

I'm not sure this is a bug either as the margin intentionally places it behind another click target.
FF seems to allow one to click-through the label to reach the checkbox.

#4 - Internet Explorer 11 (I have not tried Edge) allows this as well.

Using the per-revision bisect providing the bisect results,
Good build:55.0.2876.0(Revision: 421986).
Bad build: 55.0.2878.0(Revision: 422326).

You are probably looking for a change made after 422145 (known good), but no later than 422146 (first known bad).

CHANGELOG URL:

The script might not always return single CL as suspect as some perf builds might get missing due to failure.

  https://chromium.googlesource.com/chromium/src/+log/466049f1e8815fe27a7a47472cc29b1ce45ea9b9..8aa3f89d3b07e7052edc5adfc849eb517f20ed6f

From the CL above, assigning the issue to the concern owner 

@pdr - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.

Review-Url: https://codereview.chromium.org/2386553002

Note : Adding ReleaseBlock-Beta for now, please feel free to edit it.

Thanks!

pdr@ - weird, the original WebKit issue - https://bugs.webkit.org/show_bug.cgi?id=151401 - states that Chrome (and Firefox) actually works correctly, that only Safari did not and you still merged that change?

Thanks for taking the time to file this with a nice testcase.

This is due to a difference in how blink and webkit paint floats (see attached testcase). I think the patch to make hit testing and painting agree was a progression. That said, blink/webkit are painting this situation incorrectly :/ I'm going to mark this as depending on issue 408895 which describes the paint order bug.

As a workaround, you can add "position: relative;" to the checkbox to force it to become a stacking context which has consistent hit testing and painting across browsers.

re comment 7: I think the comment about Chrome not having the bug was due to Amazon browser sniffing. The basic issue did exist in blink.

Deleted: floatPaintOrder.html 438 bytes

floatPaintOrder.html 438 bytes View Download

Not a P1. Has a workaround.

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

I can take a look.

Unassigning for missing owner. Re-assign if you would like to take it up again.