UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Steps to reproduce the problem:
1. Load http://jsfiddle.net/35huq3ah/
2. Observe the rendered result

What is the expected behavior?
First example should be covered in blue, since the blue element has a `z-index` to be on top of the red element, and the red element is on top of the scrollable area, so that covers the scroll bar too.

Second example makes the scrollable area a stacking context, which means the blue element no longer should be on top of the red element. The scroll bar should still be rendered on top of the blue element though.

What went wrong?
The content inside the scrollable area is clipped where the scroll bar is (even if it's an overlay scroll bar). The background is not clipped, only the content. When the content is clipped, the scroll bar and the red element shows through on the right side in the first example. In the second example the content should show through behind the scroll bar, but since it's clipped it doesn't.

Did this work before? No 

Does this work in other browsers? No
 The behavior in Safari is the same as Chrome, I guess the overlay scroll bars were implemented in WebKit to start with and then the same problem was brought over to Blink.

Chrome version: 63.0.3239.84  Channel: stable
OS Version: OS X 10.13.2
Flash Version: 

I have a fix as well, although I'm not sure if it has other implications. I will push it up for review to discuss it there.
 

Deleted: current-issue.png 383 KB

	current-issue.png 383 KB View Download

Deleted: with-a-fix.png 417 KB

	with-a-fix.png 417 KB View Download