Clicking lower edge of checkbox toggles next checkbox

[robx]

I saw this while playing around with https://vipentti.github.io/elm-mdl-dashboard/:

When I click the bottom edge of a checkbox in the bottom right tile, the next checkbox is toggled instead of the one I click. This is with Safari. In the original dashboard at https://getmdl.io/templates/dashboard/index.html, the issue exists to a much smaller degree, if at all.

Apologies if this is just due to a newer MDL CSS version used at getmdl.io, I wouldn't know how to check that.

[SidneyNemzer]

It looks like this is related to the ripple effect for checkboxes; the ripples overlap, but the lower checkbox takes precedence because the height order of elements is reversed from their order in the DOM.

The Elm-MDL version behaves almost identically to the plain MDL version, for me at least.

[robx]

Yes that seems right. The difference that I see between the two versions is that the elm-mdl one has ripples that overlap the adjacent checkboxes, while with the plain mdl one, they barely extend further than half-way between the checkboxes.