lion scrollbars not showing on inner div with translate3d and z-index

Hi,

I spent hours trying to figure out why my inner div do not show the scrollbars on OS X 10.7.  I'm using the scrollbars that show only while scrolling.  There is no issue if the setting the system preference "Show scroll bars" is set to "always".  
Here is the use case:  2 div overlaps.  
The first div uses a  translate3d transform.  
The second div uses a bigger z-index to show  on top of the first one.  The second div needs a scroll bar to render.   
The user can scroll but there is no scrollbar visible.

I attach a small test file.   The red box is the first div.  The green box is overlapping and should have a scrollbar (test1 to test10).  In this small test case, adding "-webkit-transform: translate3d(0px, 0px, 0px);" to the collection div fixes the problem.  
But in my application, it does'nt work. 

In the nigthly build of webkit, you may have to resize a bit the window to enable scrolling in the inner div (green box)...  In Safari (Version 5.1.2 (7534.52.7)),  you don't have to do that. 

Chrome Version 16.0.912.77 is having the same issue.

Is there a workaround ?

Thanks.

Jeff

Created attachment 124755 [details]
small use case with 2 div overlapping.  The scroll bars on the green box don't show.

[Simon Fraser (smfr)]

This appears to be an overlay scrollbars issue, not a compositing issue; disabling compositing does not fix it.

[Jithin Emmanuel]

Hi,
I am facing the same issue in my project. Is there any workaround for this?

[jonjohnjohnson]

Though maybe still an issue for the old OS X 10.7, seems to not be an issue anymore. Can't reproduce in 10.12.6 w/ safari 12 at least.

[Alexey Proskuryakov]

Thank you for checking!