I’m got a really weird issue with Mac and IOS Safari scrollbars.
There seems to be some crazy interaction between Google Maps and css positioning that only affects Mac and IOS Safari.
This link works fine on Chrome, Firefox, Internet Explorer and Safari on Windows.
Here’s a link to the page in question: http://ve.6k2cfrvt.vesrv.com/find-a-venue/
You kind of need to see the page to get an idea of the issue. The scroll bar just doesn’t work in Safari Mac. I’m using jScrollPane to allow me to add styling to the scrollbar. I’ve done quite a bit of debugging and as far as I can see safari is not correctly applying the CSS “top” parameter.
If I remove Google Maps. The problem goes away. (this page has ordinary scroll bars: http://ve.6k2cfrvt.vesrv.com/become-a-host/ )
Does anyone have any idea of a solution?
Thanks
So I finally found the issue.
Safari Mac seems to have optimised its repainting so much that sometimes it doesn’t correctly re-render elements when their css is changed via Javascript.
A simple solution is:
Adding and removing a class forces Safari to repaint the element. I hope this is useful to someone.