Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 5 years ago

#10237 closed bug (invalid)

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

Reported by: anonymous Owned by: anonymous
Priority: low Milestone: None
Component: effects Version: 1.6.3
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (6)

comment:1 Changed 8 years ago by timmywil

Component: unfiledeffects
Owner: set to anonymous
Priority: undecidedlow
Status: newpending

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.

comment:2 Changed 8 years ago by 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).

Last edited 8 years ago by sathomasga (previous) (diff)

comment:3 Changed 8 years ago by 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.

comment:4 Changed 8 years ago by 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.

comment:5 Changed 8 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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:6 Changed 5 years ago by spoutnik

add an event.preventDefault() like:

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

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

});

Typical Chrome bug

Note: See TracTickets for help on using tickets.