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

Example URL:
https://jsfiddle.net/ecslee/u7n2sa09/

Steps to reproduce the problem:
1. Add resizable <textarea> to page
2. Add another element that will overlap or can be moved over <textarea>
3. Enter enough text within <textarea> that it can be scrolled
4. Notice that scrollbar and resize handle can be seen above the overlapping element
note: on Mac if scrollbar is not immediately visible, scrolling within <textarea> displays scrollbar above overlapping element

What is the expected behavior?
Scrollbar and resize handle should be hidden behind overlapping element, as the rest of the <textarea> is hidden.

What went wrong?
Scrollbars and resize handle are visible above any elements that overlap and hide the rest of the text area.  I've linked a simple example in jsFiddle.  This is an issue in our site because we have a draggable magnifier used to get a closer look at content.  If the magnifier is dragged over a <textarea>, the user sees a magnified version of the scrollbar/resizer and also the regular-sized version on top of the magnified content.

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: 50.0.2661.94  Channel: stable
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 22.0 r0