In Chrome/Safari, iframe inside a modal makes the main window scroll when iframe src contains a hashbang #15349

FagnerMartinsBrack · 2014-12-12T10:09:58Z

Window 7 x64
Chrome 39.0.2171.95 m

Description:
When changing the src of an iframe and that src contains a hashbang, the browser native scrolling makes the top window also be scrolled. I could reproduce when changing the src after a modal is shown and the body of the modal contains the iframe element.

Reproducing

I couldn't manage to make it work in a JSfiddle and it seems the problem requires that the files are served through a server, so I prepared the steps to reproduce the issue (file contents below):

Install node-static to start a basic server

$ npm install -g node-static

Run the following command in the directory where lies the files test.html and inner.html

$ static -p 8000

Access http://localhost:8000/test.html
Position the scroll in the top (it will be default the first time you access, of course)
Click in the first button

What happens? The top window (the one containing the iframe) will scroll down when the iframe window jumps to the hashbang target.

It strongly feels like a browser issue, since it only happens on Windows 7 x64 in "Chrome 39.0.2171.95 m" (and "Safari 5.1.7 (7534.57.2)"), but I choose to report here because it may be related to the way bootstrap modals are built.

Doesn't happen on Windows 7 x64 in Firefox 34.0, IE 11.0.9600.17501 and Opera 12.16 build 1860.

Files

They are all self contained, put them in the same directory (or use the plunkr below).

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal</h4>
          </div>
          <div class="modal-body">
            <iframe></iframe>
          </div>
        </div>
      </div>
    </div>

    <script>
    $( ".modal" ).modal({
        show: false
      })
      .on( "shown.bs.modal", function() {
        $( ".modal" ).find( "iframe" )[ 0 ].src = "inner.html#target";
      });
      window.preview = function() {
        $( ".modal" ).modal( "show" );
      };
    </script>

    <textarea rows="20"></textarea>
    <div>
      <button onclick="preview()">
        Click and window will scroll down
      </button>
    </div>

    <textarea rows="20"></textarea>
    <div>
      <button onclick="preview()">
        Click and window will scroll down
      </button>
    </div>

    <textarea rows="20"></textarea>
    <div>
      <button onclick="preview()">
        Click and window will scroll down
      </button>
    </div>

    <textarea rows="20"></textarea>
    <div>
      <buttononclick="preview()">
        Click and window will scroll down
      </button>
    </div>
  </body>
</html>

inner.html

<div style="padding-top: 5000px">
  <p id="target">
    This scrolling is a problem *devil*  -->
  </p>
</div>

http://plnkr.co/edit/ph2j5xkCYNMbXGx3o1Nf?p=preview

The text was updated successfully, but these errors were encountered:

cvrebert · 2014-12-12T20:02:44Z

Note: We absolutely don't support Windows Safari, and we only unofficially support Opera 12.
@FagnerMartinsBrack I think you should be able to make this into a http://plnkr.co example since they allow multiple HTML files.

FagnerMartinsBrack · 2014-12-13T03:22:17Z

@cvrebert yeah, didn't remembered plunkr, just copied/pasted: http://plnkr.co/edit/ph2j5xkCYNMbXGx3o1Nf?p=preview

twbs-lmvtfy · 2014-12-13T03:22:19Z

Hi @FagnerMartinsBrack!

You appear to have posted a live example (http://run.plnkr.co/plunks/ph2j5xkCYNMbXGx3o1Nf/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
W003: <head> is missing viewport <meta> tag that enables responsiveness
line 14, column 13: W007: Found one or more <button>s missing a type attribute.
line 38, column 7: W007: Found one or more <button>s missing a type attribute.
line 45, column 7: W007: Found one or more <button>s missing a type attribute.
line 52, column 7: W007: Found one or more <button>s missing a type attribute.
line 59, column 7: W007: Found one or more <button>s missing a type attribute.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

FagnerMartinsBrack · 2014-12-13T03:30:24Z

Well the omission of the suggested code was intended cause it is unrelated, but I added it back anyway for consistency.

http://plnkr.co/edit/ph2j5xkCYNMbXGx3o1Nf?p=preview

twbs-lmvtfy · 2014-12-13T03:32:48Z

Hi @FagnerMartinsBrack!

You appear to have posted a live example (http://run.plnkr.co/plunks/ph2j5xkCYNMbXGx3o1Nf/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

line 16, column 13: W007: Found one or more <button>s missing a type attribute.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

FagnerMartinsBrack · 2014-12-13T03:38:49Z

Weird, changes not detected, freezing the plunkr: http://plnkr.co/edit/ph2j5xkCYNMbXGx3o1Nf?p=preview

cvrebert · 2015-02-27T02:19:35Z

I can confirm this on OS X Yosemite in Safari 8.0.3 and Chrome 40. Doesn't happen in Firefox.

cvrebert · 2015-02-27T02:36:04Z

The problem isn't specifically Bootstrap-related. Here's a Bootstrap-free version of your Plunk that exhibits the same bug: http://plnkr.co/edit/bKBag3Tfs5QYvwywMk24?p=preview

So this is definitely a browser bug rather than a Bootstrap bug.
I would encourage you to file bugs with Chromium and WebKit regarding this (see https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#reporting-upstream-browser-bugs if you need info on how to do that).
But I don't see any reasonable workaround we could apply for this at the Bootstrap level.

FagnerMartinsBrack · 2015-02-28T01:10:25Z

X-ref: https://code.google.com/p/chromium/issues/detail?id=462809&thanks=462809&ts=1425085817

cvrebert · 2015-08-31T00:48:19Z

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=148626

FagnerMartinsBrack mentioned this issue Dec 12, 2014

Modal inside iframe with IE 9 #15342

Closed

cvrebert added the js label Dec 12, 2014

FagnerMartinsBrack mentioned this issue Dec 13, 2014

Only validate lack of "type" attribute for "button" if it is enclosed inside a form. cvrebert/lmvtfy#69

Closed

cvrebert added the browser-bug label Dec 17, 2014

cvrebert changed the title ~~Iframe inside a modal makes the main window scroll when iframe src contains a hashbang~~ iframe inside a modal makes the main window scroll when iframe src contains a hashbang, in Chrome Jan 6, 2015

cvrebert added the confirmed label Feb 27, 2015

cvrebert changed the title ~~iframe inside a modal makes the main window scroll when iframe src contains a hashbang, in Chrome~~ In Chrome/Safari, iframe inside a modal makes the main window scroll when iframe src contains a hashbang Feb 27, 2015

cvrebert removed the js label Feb 27, 2015

cvrebert closed this as completed Feb 27, 2015

cvrebert mentioned this issue Dec 20, 2015

Change "Not supported" to "N/A" for Safari on Windows #17104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In Chrome/Safari, iframe inside a modal makes the main window scroll when iframe src contains a hashbang #15349

In Chrome/Safari, iframe inside a modal makes the main window scroll when iframe src contains a hashbang #15349

FagnerMartinsBrack commented Dec 12, 2014

cvrebert commented Dec 12, 2014

FagnerMartinsBrack commented Dec 13, 2014

twbs-lmvtfy commented Dec 13, 2014

FagnerMartinsBrack commented Dec 13, 2014

twbs-lmvtfy commented Dec 13, 2014

FagnerMartinsBrack commented Dec 13, 2014

cvrebert commented Feb 27, 2015

cvrebert commented Feb 27, 2015

FagnerMartinsBrack commented Feb 28, 2015

cvrebert commented Aug 31, 2015

In Chrome/Safari, iframe inside a modal makes the main window scroll when iframe src contains a hashbang #15349

In Chrome/Safari, iframe inside a modal makes the main window scroll when iframe src contains a hashbang #15349

Comments

FagnerMartinsBrack commented Dec 12, 2014

Files

cvrebert commented Dec 12, 2014

FagnerMartinsBrack commented Dec 13, 2014

twbs-lmvtfy commented Dec 13, 2014

FagnerMartinsBrack commented Dec 13, 2014

twbs-lmvtfy commented Dec 13, 2014

FagnerMartinsBrack commented Dec 13, 2014

cvrebert commented Feb 27, 2015

cvrebert commented Feb 27, 2015

FagnerMartinsBrack commented Feb 28, 2015

cvrebert commented Aug 31, 2015