CODEWITHSUNDEEP
htmlcssiframe
Josh
Josh

Reputation: 103

IFrame not scrolling on IOS Safari

I have an IFrame on a webpage when I use IOS Safari I have a bug where it doesn't let me scroll down. I've done a lot of research around this and see its a common bug, but I can't seem to get my version working. The most descriptive solution is How to get an IFrame to be responsive in iOS Safari?.

Although I can't get that method working for me. Heres what I have so far:

index.html

html,
body {
  padding: 0;
  margin: 0;
  border: 0;
}

iframe {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  border: 0;
  z-index: 9999;
  /* overflow: auto; */
}

#scroll-wrapper {
  -webkit-overflow-scrolling: touch!important;
  overflow-y: scroll;
  width: 100%;
  height: 150vh;
  z-index: 9999;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>

<body>

  <!-- <div id="scroll-wrapper"> -->
  <iframe src="iframe.html" allowtransparency="true"></iframe>
  <!-- </div> -->

</body>

</html>

iframe.html

html,
body {
  padding: 0;
  margin: 0;
  border: 0;
  width: 1px;
  min-width: 100%;
  *width: 100%;
}

div {
  display: block;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
  height: 1000px;
  border: 3px solid grey;
  text-align: center;
  line-height: 150px;
  margin-bottom: 50px;
  margin-top: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

</head>

<body>

  <div>Context1</div>

</body>

</html>

Upvotes: 1

Views: 8545

Answers (2)

shayuna
shayuna

Reputation: 484

2022 and still a problem on ios. the solution i found is a hack, and it suits me much better than the wrapper around the iframe. for this hack to work we need an element in the iframe and and onload function attached to the iframe in the parent window:

in the iframe, put it anywhere you'll like:

<span id="eIphoneHack"></span>

in the parent, add an onload event to the iframe:

        $("#eInnerWnd").on("load",function(e){
                        $("#eIphoneHack",document.getElementById("eInnerWnd").contentWindow.document).css("display","none").css("display","initial");
}

and hopefully it will work for you as it did for me.

Upvotes: 0

zur4ik
zur4ik

Reputation: 6254

Uncomment <div id="scroll-wrapper"> and add this style for iframe wrapper:

#scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

See David's post about this trick

Upvotes: 5

Related Questions