UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:58.0) Gecko/20100101 Firefox/58.0

Example URL:
https://codepen.io/simonpai/pen/MQxqLv

Steps to reproduce the problem:
See 
https://codepen.io/simonpai/pen/MQxqLv

1. In the codepen, scroll down to reveal the pink block, which is a non-static child of a position-fixed element clipped by another element.
2. Try to hover on the pink block.

What is the expected behavior?
It should take the hover effect and turn red.

What went wrong?
The mouse event doesn't occur on the pink block, but triggered on the fixed element instead.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: <Copy from: 'about:version'>  Channel: stable
OS Version: OS X 10.11
Flash Version: 

* It also fails on OSX Safari, but passes on OSX Firefox.
* It passes when you replace clip with clip-path: inset(0);