Side navigation
#10237 closed bug (invalid)
Opened September 09, 2011 03:25PM UTC
Closed September 24, 2011 08:08AM UTC
Last modified January 14, 2014 04:15PM UTC
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.
Attachments (0)
Change History (6)
Changed September 09, 2011 03:26PM UTC by comment:1
component: | unfiled → effects |
---|---|
owner: | → anonymous |
priority: | undecided → low |
status: | new → pending |
Changed September 09, 2011 04:21PM UTC by comment:2
_comment0: | 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 in position 0,0. \ → 1315586000851087 |
---|
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).
Changed September 09, 2011 04:36PM UTC by comment:3
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.
Changed September 09, 2011 06:38PM UTC by comment:4
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.
Changed September 24, 2011 08:08AM UTC by comment:5
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 January 14, 2014 04:15PM UTC by comment:6
add an event.preventDefault() like:
jQuery("#scroll").click(function(e){
e.preventDefault();
jQuery("#image).animate({left: -800});
});
Typical Chrome bug
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.