Chrome bug with pointer-events and mouse-scroll?

Question

Fiddle to reproduce: Resize this until vertical scrollbar appears: http://jsfiddle.net/yxf1v60x/2/embedded/result/

Expected behavior: mousewheel scrolls when used over the yellow area.

Observed behavior: doesn't work in Chrome, works fine in Firefox.

---

HTML code:

<div class="parent"><input /><div class="child"><div class="subChild"><input /></div></div></div>

CSS code:

html,body{

  overflow:hidden;
  height: 100%;
  width: 100%;
}
.parent {
  pointer-events:none;        
  position: absolute;
  z-index:10;
  top:0px;
  left:0;
  right:0;
  bottom:0px;
  background-color:#ff0000;
  height: auto;
  overflow-y:auto;
}
.child {
    pointer-events:auto;
    position: absolute;
    z-index:11;
    top:50px;
    left:0;
    right:0;
    bottom: 0;
    max-height: 100%;
    background-color:#0000FF;
}
.subChild{
    height: 500px;
    background-color:yellow;
    width: 100%;
  }
}

---

So I'm not sure what's going on here: pointer-events clearly work on the yellow area, since the related input element is clickable. Scrolling via keyboard also works (try with page up/page down with focus on yellow area).

a) Is this a Chrome bug?

b) Can I avoid it while keeping both parent and child absolute positioned? I do not wish to have pointer-events on the parent element.

Answer 1

What is going on: The overflow-y attribute, and with it the scrolling-capability, is on the pointer-events: none parent.

Firefox seems to handle pointer-events in this way:

If one of the element's children has pointer-events explicitly set to allow that child to be the target of mouse events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

While Chrome does not trigger the event on a parent with pointer-events: none. This might actually be a bug and you could/should try to report it. Good catch!

Moving the overflow-y attribute to a container could be the solution, as long as scrolling on the parent is okay, since the parent's pointer-events: none would prevent all actions on itself, while passing the mouse event to the scrollable container.

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.parent {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-color: #f00;
}

.child {
  position: absolute;
  z-index: 11;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100%;
  pointer-events: auto;
  background-color: #00f;
}

.subChild {
  width: 100%;
  height: 500px;
  background-color: yellow;
}

<div class="container">
  <div class="parent">
    <input />
    <div class="child">
      <div class="subChild">
        <input />
      </div>
    </div>
  </div>
</div>