pointer-events not affecting scrollbars in Firefox & Opera

Viewed 1183

I was working on a dropdown menu in CSS when I found something about pointer-events in Firefox 44. At first I thought it would be a mistake that happened in new version of Firefox, but I saw the problem in Firefox 25 again, and it also exists in Opera 18 (which is running webkit).

The code itself could be very confusing, so I made another sample:

div {
  width: 150px;
  height: 200px;
  line-height: 30px;
  background: #DDD;
  /*- overflow-y -*/
  overflow-y: auto;
  /*- pointer events -*/
  pointer-events: none;
}
div:hover {
  background: #D77;
}
<div>
  text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>
</div>

As you see, the div element's pointer-events property is set to none, so we would expect it not to run the :hover at all.

But just go ahead and move your cursor on the scrollbar (in Firefox and Opera).

pointer-events is completely supported in all major browsers, so what's wrong? Am I missing something?

EDIT:
It's solved in newer versions of opera
but I need It to work at least on all common versions of chrome, opera and firefox
any trick or alternative way?

EDIT 2: here's the fiddle https://jsfiddle.net/ja0ct9s6/2/
at first look it work's well
but take your cursor out of it , move it in again from the right side (when you don't see the dropdown) , It look's the scrollbar still hoverable(?) (remember to use firefox)

3 Answers
Related