Bug Tracker

#12588 closed bug (invalid)

Opened September 21, 2012 10:11PM UTC

Closed October 23, 2012 09:04AM UTC

Last modified May 08, 2013 08:33AM UTC

ScrollLeft/ScrollTop does not simultaneously (Safari 6)

Reported by: paziz@resonanceco.com Owned by: paziz@resonanceco.com
Priority: undecided Milestone: None
Component: unfiled Version: 1.8.0
Keywords: Cc:
Blocked by: Blocking:
Description

Animating an element to scrollLeft and scrollTop in the same jquery animation does not work and results in no action at all. This bug only started occurring in Safari 6 and only Safari 6.

Refer to this thread for more information:

http://forum.jquery.com/topic/scrolltop-scrollleft-not-working-in-safari-6

Attachments (0)
Change History (7)

Changed September 21, 2012 11:02PM UTC by anonymous comment:1

I was planning on showing an example of the bug through a very simple script, but the animation is actually working properly when it is viewed on jsfiddle with Safari 6. Which is kind on annoying actually.

http://jsfiddle.net/VhBve/2/

However, if you copy the html and run the file in a browser, you'll notice that only one direction works. (Please test in Safari 6)

Changed September 23, 2012 03:15PM UTC by mikesherov comment:2

owner: → paziz@resonanceco.com
status: new → pending

Unfortunately, I've followed the steps you provided, and was unable to reproduce this issue. Please test using the latest version of jQuery as well. If you can find a more solid set of reproduction steps please let me know.

Changed September 25, 2012 12:48AM UTC by anonymous comment:3

Thanks for looking into this Mikesherov.

I tested a basic HTML file with the latest version of jquery, and the bug still exists. I set up a really basic html file for you to test with.

Basically, if you set up a body that is big enough to be scrollable and try this:

var scrollElement = 'html, body';

$(scrollElement).animate({'scrollTop':1000,'scrollLeft':1000 }, 1000, 'swing');

You will only see one direction that scrolls in Safari 6. While all other browsers, scroll both directions.

Here is the html file I created for you:

<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery bug</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var scrollElement = 'html, body';

$(scrollElement).animate({'scrollTop':1000,'scrollLeft':1000 }, 1000, 'swing');

})

</script>

<style type="text/css">

.testDiv{

width: 500px;

height: 3000px;

position:relative;

float:left;

}

#divHolder{

height:100%;

width:100%;

}

body{

width:5000px;

}

</style>

</head>

<body>

<div id="divHolder">

<div class="testDiv" style="background-color:blue;"></div>

<div class="testDiv" style="background-color:red;"></div>

<div class="testDiv" style="background-color:green;"></div>

<div class="testDiv" style="background-color:gray;"></div>

<div class="testDiv" style="background-color:yellow;"></div>

<div class="testDiv" style="background-color:blue;"></div>

<div class="testDiv" style="background-color:red;"></div>

<div class="testDiv" style="background-color:green;"></div>

<div class="testDiv" style="background-color:gray;"></div>

<div class="testDiv" style="background-color:yellow;"></div>

</div>

</body>

</html>

Changed October 08, 2012 08:01PM UTC by anonymous comment:4

Yes, bug is reproducible and a specific Safari 6 only issue.

Changed October 08, 2012 08:23PM UTC by dmethvin comment:5

So this only happens in Safari 6? Have you reported it to Safari as a bug? It sounds like they broke something. You can wait for us to work around it, but we may not do anything if Safari fixes the problem. In the meantime a search for "Safari 6 scrollTop" gave this:

https://github.com/kswedberg/jquery-smooth-scroll/issues/29

http://www.davidroessli.com/logs/2012/07/safari_6_breaks_my_javascript/

Changed October 23, 2012 09:04AM UTC by trac-o-bot comment:6

resolution: → invalid
status: pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Changed May 08, 2013 08:33AM UTC by kemayo comment:7

I've run into this as well, and confirmed that it happens only on Safari 6 running on Mountain Lion. I filed bug #13836000 with Apple about it.

Fundamental problem seems to be that if you do $(document).scrollTop(10000).scrollLeft(0); only the final scrollWhatever call has an effect. Since jQuery seems to boil them down under the hood to window.scrollTo(x, y) calls, I suspect that the initial calls aren't actually updating the values until another tick has gone by.

I wound up making this as a reproducible test case: http://random.davidlynch.org/s6ml_scrolling.html (and I'll confirm that it doesn't happen on jsfiddle; I suspect because it displays in an iframe)