#12588 closed bug (invalid)
ScrollLeft/ScrollTop does not simultaneously (Safari 6)
| Reported by: | Owned by: | ||
|---|---|---|---|
| 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
Change History (7)
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
| Owner: | set to [email protected]… |
|---|---|
| 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.
comment:3 Changed 10 years ago by
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:5 Changed 10 years ago by
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 10 years ago by
| 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!
comment:7 Changed 10 years ago by
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)
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)