Question

I have a page with a Google map and a slider made by me that uses a simple horizontal animation.

Everything works fine except on Safari 5.1 (mac) where the animation is screwed up (it doesn’t go all the way across).

I found out that removing the map (loaded with API v3) fixes the issue.

I’ve setup a jsfiddle so you can test it out: http://jsfiddle.net/tGRf6/29/
(simply click on “Next” to run the slider)

EDIT
It may have something to do with “repaint” and stuff like that, since I noticed that resizing the window brings the slide in place.

Answer 1

This update to your example seems to work in Safari 5.1: http://jsfiddle.net/tGRf6/33/

Removing overflow:hidden from div#slider fixed the issue. In order to hide the other slide elements again, I then wrapped another <div id="innerslider"> around the <ul> and moved the overflow:hidden property from <div id="slider"> to that new <div> (plus some more CSS).

I would still (first search for and then) issue a bug report with your jsfiddle example, pointing out that overflow:hidden seems somehow involved.

Hope this helps.

---

Before coming to this potential solution (did not test in other browsers than Safari 5.1 and Firefox 7) I had written down some observations:

• Replacing the .animate() method by some plain JavaScript using setTimeout did not change the effect.

• Non-animated changing of the left property works as expected, however, with the map included it is always “1 click behind” (first click changes the property to -800 but nothing changes, second click sets it to -1600 but the middle sliderelement is shown etc.).

• Lowering the animation duration to 20 worsens the error as the “pixel steps” get bigger per iteration. Again, it does look like the last change does not “get through”. Accordingly, when setting the duration to 800 (1ms/px) the element is one pixel off afterwards.

• In-/decrementing the value for left in the developer tools shows also some strange effects when the map is included, e.g. when decrementing by 2 the sliderelement moved 1px right, then back 1px to the left. Everything ok when the map is thrown out.

• Removing the “overflow:hidden” property of the slider div fixes the error, but you would have to hide the sliderelements some other way (see the revised jsfiddle).

• It does a lot look like the last change of the left property is not reflected in the rendered page, when the map is included.