animate in iframe causes parent to scroll to position iframe at top of window (webkit only)

[anonymous]

When jquery is loaded and run within an iframe, executing animate() on content within the iframe causes the parent document (the page that contains the iframe) to scroll so that the iframe is positioned at the top of the window. Seems to be webkit only as is reproducible in Chrome 13.0.782.112 (MacOS) and Safari 5.1 (6534.50) but no problem with Firefox or Opera.

[Timmy Willison]

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: ​http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

[sathomasga]

Because the bug manifests only with an iframe, I haven't been able to figure out how to create it in jsFiddle. (I've tried.) The guidelines say not to post code in the bug report itself, but it's fairly trivial to reproduce. The parent page only needs to have some content and then an iframe, e.g.

<p>Enough content to ensure the iframe doesn't appear at the top</p>
<iframe width="800" frameborder="0" height="600" scrolling="no" src="http://some/content/"></iframe>

It's the iframe that should include (and use) jQuery:

<img id="image" src=some/image.gif' width='3200' height='600' border='0'/>
<a id="scroll"  href="#">Scroll</a>
<script type="text/javascript">
    jQuery("#scroll").click(function(){
        jQuery("#image).animate({left: -800});
    });
</script>

If you click on the Scroll anchor, then Safari and Chrome will slide the image correctly and (incorrectly) scroll the main window so that the iframe is at the top. (I.e. it will hide the initial paragraph in the example above).

[sathomasga]

There's a similar issue reported here ​https://github.com/jquery/jquery-mobile/issues/560 but it looks like it's not being actively worked.

[dmethvin]

If you create a similar page (not using jQuery) that simply sets the left position inside the iframe, does the same thing happen? If so it sounds like something that should be reported to Webkit.

[trac-o-bot]

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!

[spoutnik]

add an event.preventDefault() like:

jQuery("#scroll").click(function(e){

e.preventDefault(); jQuery("#image).animate({left: -800});

});

Typical Chrome bug