∅ the empty set

Safari 6 breaks my JavaScript

Safari6 bug

After upgrading to Mountain Lion (Mac OS 10.8) I noticed that some of my JavaScript code stopped working in Safari 6.

For example, I'm having trouble with .scrollTop() which stopped performing as it should.

I use this function to implement a smooth scroll on hairproject.ch based on a CSS Tricks snippet. The function doesn't return any scrollable elements when run in Safari 6. I'm still looking for a workaround…

I checked the internets, and other people are complaining of a range of Safari 6 issues related to JavaScript.

To be continued.

Aug 6 update: I brushed up a quick test page at www.cybmed.com/w/safari6bug if you care to take a look.

Ø permalink: https://davidroessli.com/logs/2012/07/safari_6_breaks_my_javascript/


Reponses to “Safari 6 breaks my JavaScript”

#1 by Johnny

20:28 on 24 August 2012

There is a related bug in Safari 6:

When you insert an element into the DOM, you can no longer immediately do "container.scrollTop = container.scrollHeight"; it will not scroll to the absolute bottom, and will instead stop a few pixels shy, such as scrolling down to 877 pixels rather than 880 pixels. The error gets larger the more elements are in the DOM.

.scrollHeight immediately updates properly; it's the .scrollTop property which can no longer scroll immediately down to the new bottom, and clamps the value to some pixels before the end, if called too soon.

The solution is to insert a small wait period, like this:
- Insert the new element into DOM.
- setTimeout(function(){container.scrollTop = container.scrollHeight;},1)

This will insert a millisecond (plus some overhead) of wait before the .scrollTop change attempt, and is enough to fix the bug. The bug appeared in Safari 6 or the last Safari 5 version.

I think it's related to Apple doing all kinds of optimizations (as usual) on their very fast Javascript engine, and somehow screwing something up in the process.

#2 by David Roessli

10:53 on 25 August 2012

Thank you @Johnny for this detailed explanation!
It will be of great help in fixing existing code until the bug iitself is corrected.

#3 by Johnny

19:57 on 25 August 2012

Hello David,

I'm glad that my info managed to help; I found your blog post very helpful too in analyzing the problem. My own code ended up with a small 1 millisecond timer calling the scrolling function, and everything works perfectly until the bug is fixed. ;-)

Good luck with your site!
- Johnny

#4 by Johnny

05:17 on 27 February 2013

Safari no longer has the .scrollTop=.scrollHeight calculation bug.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)



Previous: Off to Tuscany

Next: Dad


About

Hello, my name is David Roessli. I am a freelance web designer and developer based in Geneva, Switzerland.

This weblog is an nth attempt to solve my multiple online personalities and weblog/rss feeds burnout issues. (more)

Words

I have been contemplating the idea of upgrading my desktop Mac since this spring. The latest 27" iMac (Quad-Core) seemed the perfect candidate, but the release of Apple's 27" Monitor last September made me stick with the Mac Pro...

Music

The autopsy of an iconic album cover picked up on Kottke.org. A stacked graph of successive radio signals from pulsar CP 1919, in a 1977 astronomy encyclopedia that originated in a 1970 Ph.D. thesis. Fascinating <3...

Pictures

Check out my latest Flickr ramblings. Mostly day to day cameraphone pictures stolen here and there.


© 2000-2016 David Roessli | v4.1 | as valid xhtml and css as possible | hosted by pair Networks | RSS feeds.