AutoScroll element interferes with elements below it

[alexbarrett]

I encountered this issue while reading this web page: http://activelamp.com/blog/devops/drupal-8-development-in-docker-redux/

Description
Some of the code samples on the linked page are wider than my viewport. The site uses JavaScript to dynamically expand the width of these code samples when hovered over.

However, if you hover over one of the then middle click to auto-scroll, the cursor is no longer hovering over the element and the page shrinks the code sample back down again.

I've not tested this with CSS hover events but I expect it would exhibit the same behaviour.

Steps to reproduce

1. Open the linked page and resize your viewport so the width is less than at least one of the code samples.
2. Hover over a code sample wider than your viewport, causing its width to expand.
3. Middle-click to start auto-scrolling to the right.

Expected result
The code sample remains expanded while you auto-scroll allowing you to read its contents.

Actual result
The code sample shrinks, as the cursor is now hovering over the AutoScroll element instead of the code sample.

Possible fix
Add the pointer-events: none CSS property to the AutoScroll element. Doing this manually in Web Inspector fixes the issue for me (temporarily).

[Pauan]

@alexbarrett Thanks a lot for the very detailed report! And sorry for the delay.

After investigation, I concluded that it's just not possible to fix this. Adding pointer-events: none fixes this specific problem, but it breaks the cursor, and it makes it possible to click on things when scrolling (which shouldn't be possible). So unfortunately that's not a good solution.

So it seems I cannot fix this. I'll leave this open, just in case some new API comes along that makes this possible.