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

Steps to reproduce the problem:
http://codepen.io/JohnONolan/pen/qrbWZw

What is the expected behavior?
The left example is expected behaviour: The sticky bars appear below the browser scroll bars.

What went wrong?
The right example demonstrates the problem: The sticky bars now sit on top of the browser scroll bars.

The only difference between the two is that the right example has border-radius applied to the parent. 

Verified in latest stable + latest canary

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 56.0.2924.87  Channel: canary
OS Version: OS X 10.12.3
Flash Version: Shockwave Flash 24.0 r0

I tried to fix this by applying border-radius to an additional wrapping element with overflow:hidden, but that triggered another bug there overflow:hidden doesn't work with border radius.

Then I tried setting the opacity of the wrapping element to 0.99, which fixes the overflow bug with border radius, but introduces a new a bug where position:sticky elements break completely and collapse on themselves.