Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iOS iframe scroll jumping #50

Open
FuturaExtraBold opened this issue Jul 31, 2014 · 9 comments
Open

iOS iframe scroll jumping #50

FuturaExtraBold opened this issue Jul 31, 2014 · 9 comments

Comments

@FuturaExtraBold
Copy link

Specific problem:
On iOS devices, a page which contains a countdown timer, when inside an iframe, when scrolled more than halfway down, on each tic, will jump to the top.

Steps to reproduce:

  1. Setup a simple html page.
  2. Add an iframe with "http://keith-wood.name/countdown.html" as the src attribute.
  3. Open in Safari on an iOS device or iOS simulator, or Chrome on an iOS device.
  4. Display the iframe.
  5. Scroll the iframe down about 75%.
  6. On each tic, the iframe will jump to the top of the page.

Desired result:
The page should scroll normally, as does those without the countdown timer.

Simple example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>iframe test</title>
    <style>
      .iframe-container {
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="iframe-container">
      <iframe src="http://keith-wood.name/countdown.html" height="460" width="300"></iframe>
    </div>
  </body>
</html>
@wykydtronik
Copy link

I am having the same issue and cannot find a resolution. Why does iOS always have to be so difficult :(

@gaga1227
Copy link

gaga1227 commented Oct 1, 2014

It seems to be a mobile Safari bug on iframe, and from my test, is triggered by the following combination:

  1. the iframe page is scrolled entirely into the 2nd fold or further
  2. there is JavaScript updating CSS property on the page

@sirbrillig
Copy link

I'm experiencing the same bug. Some CSS properties (eg: color) seem to be ok, but others (font-family, opacity, or changing the text content of the element) cause the jump. Have you found any solutions?

@kalamun
Copy link

kalamun commented Apr 19, 2015

Me too :\

@parallel-universe
Copy link

This should get you up and running until Apple get this resolved.

http://stackoverflow.com/questions/34766636/ios-browser-iframe-jumps-to-top-when-changing-css-or-content-using-javascript

@gaga1227
Copy link

Worth a try using iframe-resizer: (https://github.com/davidjbradshaw/iframe-resizer). I used it in a recent project and experienced no such issues anymore.

@scktt
Copy link

scktt commented Jan 21, 2016 

html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

in the stylesheet of the iframe source page fixes the issue for us on ios9

@cquezpro
Copy link

cquezpro commented Jun 8, 2016

I got same error. When do scroll iframe content, it is moving some content and jump to top again.
any helpful tip for that?

@gilbertwat
Copy link

in iOS the iframe height must not be auto or 100% or else the iframe will scroll back to the top. really annoying

@casparz casparz mentioned this issue Jul 22, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@gilbertwat @kalamun @gaga1227 @wykydtronik @sirbrillig @parallel-universe @scktt @cquezpro @FuturaExtraBold