Chrome mistakenly lets pointer events (click/hover/etc) pass through flex items if they have negative margin |
|||
Issue descriptionChrome Version: Version 68.0.3423.2 (Official Build) dev (64-bit) OS: Ubuntu 18.04 What steps will reproduce the problem? (1) Visit https://jsfiddle.net/1tf66qrn/ (2) Hover & click the orange area What is the expected result? Hovers/clicks on the orange area **should not** trigger the covered-up link or cause the cursor to change. What happens instead? Clicks do trigger the link, and hovering does trigger the "link" mouse cursor. This only seems to happen with flexbox, as far as I've seen so far. If I rewrite the testcase to use side-by-side inline-blocks or floats (instead of flex items), then I get the correct/expected result. Edge 17 and Firefox 62 Nightly give "expected results". Safari 11.1 gives the same buggy result as Chrome, but that's presumably just because their flexbox/layout implementation share a lot of code (and hence have common bugs).
,
May 18 2018
Note: if I change the testcase to add a non-default "opacity" (or position:relative) to the negative-margin div, then Chrome gives "expected result", as shown here: https://jsfiddle.net/1tf66qrn/1/
,
May 18 2018
...and as noted in the initial comment here: if I use inline-blocks instead of flex items (i.e. no flexbox), then Chrome/Safari give me expected results. Here's an amended version of the testcase to demonstrate that (no issues, mouse events blocked correctly): https://jsfiddle.net/1tf66qrn/2/ Also FWIW, I filed a WebKit version of this bug: https://bugs.webkit.org/show_bug.cgi?id=185771
,
May 18 2018
,
Dec 20
I believe this is due to hit testing not being performed in the reverse order as painting. Taking a look at this.
,
Jan 10
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/25ece8e7574112efedb141a28bc3755e3a0173d7 commit 25ece8e7574112efedb141a28bc3755e3a0173d7 Author: Andrew Comminos <acomminos@fb.com> Date: Thu Jan 10 09:23:47 2019 Perform flexbox child hit testing by testing all children atomically When two child elements of a flexbox overlap (for example, due to negative margins), the element drawn in the foreground may not actually capture the hit if the element underneath it is hit-tested in an earlier phase (e.g. foreground before child block background), despite being occluded. This is because painting of flexbox children is done atomically (all phases at once). This change makes hit testing atomic as well, in accordance with the spec [1]. [1] https://www.w3.org/TR/css-flexbox-1/#painting Bug: 844505 Change-Id: Iceab80b42f19488dcb59565ea3c0ce40d48c483b Reviewed-on: https://chromium-review.googlesource.com/c/1388206 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Andrew Comminos <acomminos@fb.com> Cr-Commit-Position: refs/heads/master@{#621516} [modify] https://crrev.com/25ece8e7574112efedb141a28bc3755e3a0173d7/third_party/blink/renderer/core/layout/layout_flexible_box.cc [modify] https://crrev.com/25ece8e7574112efedb141a28bc3755e3a0173d7/third_party/blink/renderer/core/layout/layout_flexible_box.h [modify] https://crrev.com/25ece8e7574112efedb141a28bc3755e3a0173d7/third_party/blink/web_tests/TestExpectations [add] https://crrev.com/25ece8e7574112efedb141a28bc3755e3a0173d7/third_party/blink/web_tests/external/wpt/css/css-flexbox/hittest-overlapping-margin.html [add] https://crrev.com/25ece8e7574112efedb141a28bc3755e3a0173d7/third_party/blink/web_tests/external/wpt/css/css-flexbox/hittest-overlapping-relative.html
,
Jan 14
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/87e2aa2aa78117ff8ac9b2f0e976a491c302aee7 commit 87e2aa2aa78117ff8ac9b2f0e976a491c302aee7 Author: Andrew Comminos <acomminos@fb.com> Date: Mon Jan 14 17:51:50 2019 Add WPT for ensuring flexbox child hit testing is done in flex order Currently fails both with and without LayoutNG. Non-LayoutNG case should depend on a reversed OrderIterator for performing hit testing. Bug: 844505 Change-Id: I93a96922cad57ace6990310e4855355d06c8cd66 Reviewed-on: https://chromium-review.googlesource.com/c/1407926 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Andrew Comminos <acomminos@fb.com> Cr-Commit-Position: refs/heads/master@{#622504} [modify] https://crrev.com/87e2aa2aa78117ff8ac9b2f0e976a491c302aee7/third_party/blink/web_tests/TestExpectations [add] https://crrev.com/87e2aa2aa78117ff8ac9b2f0e976a491c302aee7/third_party/blink/web_tests/external/wpt/css/css-flexbox/hittest-overlapping-order.html |
|||
►
Sign in to add a comment |
|||
Comment 1 by dholb...@gmail.com
, May 18 2018Components: Blink>Layout>Flexbox