Bug Tracker

Ticket #12588 (closed bug: invalid)

Opened 2 years ago

Last modified 19 months ago

ScrollLeft/ScrollTop does not simultaneously (Safari 6)

Reported by: paziz@… Owned by: paziz@…
Priority: undecided Milestone: None
Component: unfiled Version: 1.8.0
Keywords: Cc:
Blocking: Blocked by:

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

Change History

comment:1 Changed 2 years ago by anonymous

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)

comment:2 Changed 2 years ago by mikesherov

  • Owner set to paziz@…
  • Status changed from new to 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.

comment:3 Changed 2 years ago by anonymous

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>

comment:4 Changed 2 years ago by anonymous

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

comment:5 Changed 2 years ago by dmethvin

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/

comment:6 Changed 2 years ago by trac-o-bot

  • Status changed from pending to closed
  • Resolution set to invalid

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!

comment:7 Changed 19 months ago by kemayo

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)

Note: See TracTickets for help on using tickets.