While working on a CSS dropdown menu, I encountered an issue with the pointer-events property in Firefox 44. Initially, I assumed it was a bug in the newer version of Firefox, but upon testing, I found the same problem in Firefox 25 and even in Opera 18, which is powered by WebKit.
To better illustrate the problem, I created 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 can see, the pointer-events property of the div element is set to none, so one would expect the :hover state not to trigger at all.
However, when you move your cursor over the scrollbar in Firefox and Opera, the issue persists.
pointer-events is fully supported by all major browsers, so what could be the problem here? Am I overlooking something?
EDIT:
The issue has been resolved in newer versions of Opera,
but I need it to function properly on common versions of Chrome, Opera, and Firefox. Is there a workaround or an alternative solution?
EDIT 2: Here's the jsfiddle link https://jsfiddle.net/ja0ct9s6/2/
Initially, it appears to work fine,
but if you take your cursor out of the dropdown and move it back in from the right side (where the dropdown is not visible), the scrollbar still appears to trigger the hover effect. (Note: test this in Firefox)