CODEWITHSUNDEEP
htmlipadiframescrollmobile-safari
Kendal
Kendal

Reputation: 21

IPad iframe scrolls to top after CSS change

Open the following HTML on iPad Safari. Scroll down within the iframe. Select male or female radio button which causes a CSS change. Notice the iframe scrolls back to the top. I have the same issue in an application that I'm working on and this issue only happens on iPad (Android and desktop browsers don't have this issue).

<!DOCTYPE html>
<html>
  <head>
    <title>iframe test</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
      }
      div.iframe-container {
        width: 850px;
        height: 400px;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #cecece;
      }
    </style>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  </head>
  <body>
    <form>
      <input id="genderMale" type="radio" name="gender" value="male" onchange="onRadioSelect();"/>
      <label for="genderMale">Male</label>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input id="genderFemale" type="radio" name="gender" value="female" onchange="onRadioSelect();"/>
      <label for="genderFemale">Female</label>
    </form>
    <br/>
    <div class="iframe-container">
      <iframe src="http://www.engadget.com" height="100%" width="100%" frameBorder="0"></iframe>
    </div>
  </body>
</html>

<script type="text/javascript">
if((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null)) {
  $(".iframe-container").css("overflow", "auto");
}

function onRadioSelect(event) {
  switch($("input:checked").val()) {
  case "male":
    $("body").css("border", "2px solid #ff0000");
    break;
  case "female":
    $("body").css("border", "2px solid #0000ff");
    break;
  }
  setTimeout(function() {
    $("body").css("border-style", "none");
  }, 250);
}
</script>

Any ideas how to prevent this from happening? I'd like the scroll position to remain unchanged as other things happen within my parent page.

Upvotes: 2

Views: 1930

Answers (1)

Kevin Kamer
Kevin Kamer

Reputation: 99

I had the same issue. Solved with a scrollable div.

Created a div around the content (not the iframe) with the following style:

<div style="-webkit-overflow-scrolling:touch; overflow-x:hidden; overflow-y:auto; height:100%;">
  <iframe src='#' />
</div>

If that doesn't solve the issue try removing the <DOCTYPE> because HTML5 doesn't support <DOCTYPE>

Upvotes: 2

Related Questions