Open Radar

 
Summary:
Sometimes a scrollbar will not appear on an overflowing div if the div is in front of an HTML5 Canvas that has been painted. I'm seeing this issue in a fairly complicated project, but I've reproduced it in a simple jsfiddle.

Steps to Reproduce:
Very simple jsfiddle demonstrating issue:
http://jsfiddle.net/AndrewMcKim/u3zqd4be/



Expected Results:
On latest Chrome, FireFox, and IE 11, I get scrollbars on both scrollBarAppears (the upper red rectangle) and scrollBarAbsent (the lower red rectangle). We should be seeing scrollbars on both. 

Actual Results:
On OS X Safari, I get scrollbars on scrollBarAppears but no scrollbars on scrollBarAbsent. I get similar results in iOS Safari if I use a CSS scrollbar style to make the scrollbars appear there - they only appear on scrollBarAppears, not scrollBarAbsent.

The only significant difference between scrollBarAppears and scrollBarAbsent appears to be that we are drawing on a canvas (the blue region) that is behind scrollBarAbsent. If we don't do this (i.e. comment out the paintCanvas call), then scrollBarAbsent gets its scroll bar in Safari.

Version:
Safari 8.0.8 (10600.8.9), OSX 10.10.5 on a Mac mini (see attached configuration file)

Notes:
I think this person may have encountered the same problem:
https://github.com/ajaxorg/ace/issues/2486