jQuery jScrollPane issue/conflict with Google maps on Safari

Question

I seem to have come across a strange bug/conflict between jScrollPane and Google Maps (v3) when viewed on Safari.

The issue is that if I have a LI element inside my scroll Pane, that is set to display:block, and also a google map on the page, the LI element does not scroll with the rest of the content. Removing or simply hiding the google map on the page removes the scrolling issue.

I have built a test case here. http://www.incontrolsolutions.com/scroll/stackoverflow.html

This page works correctly in FF, Chrome (Smooth like butter!) and even IE9

But Safari (Including webkit nightly builds up to today) chokes.

Any insight on what can be causing this, or potential workarounds are greatly appreciated.

Answer 1

Good question and great demo. I can replicate in Safari 5.0.5 on Snow Leopard and it is really strange behaviour.

I have no idea what is causing the problem but it seems like you can work around it by adding a z-index: 999; to the CSS rule for #RS_MapListPanel. If I make that change through the web inspector then the page seems to behave correctly.