When a div (e.g. container) with overflow: auto is the child of a div (e.g. app) with display: grid, middle-clicking over children of container that have shadow DOMs does not trigger scrolling.

This occurs on Windows 10 and MacOs. Scrolling for Chrome works as expected. I've attached a minimal example that reproduces the issue. Middle click in the white area triggers scrolling, while the red area does not.

Removing display: grid, overflow: auto or not using shadow DOMs will cause scrolling to behave as expected.

If the example seems contrived, I posted here[1] with a context snippet that explains why this combination of styles is used.

[1]. https://stackoverflow.com/questions/54952923

While trying to find a workaround, I came across the same issue with flex boxes. I've attached another example document. Not sure if that should be a new bug (is a bug at all) or if this title should be edited to include it.

Here is an even more basic example. I realize this issue affects any element that:

1. uses scrolling overflow
2. has a fixed height, whether through the height attribute, grid, flex or javascript

ok, so most likely autoscroll is listening events somewhere in light DOM, but should listen in chrome event handler, or, it is using event.target and not event.composedTarget, or both