IFrame not scrolling on IOS Safari

Question

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>

score 5 · Accepted Answer · answered Oct 23 '19 at 11:32

5

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

answered Oct 23 '19 at 11:32

zur4ik

6,072
9
52
78

Thank you @zur4ik! – Peter Catalin Nov 15 '21 at 17:20

score 0 · Answer 2 · answered Jul 20 '22 at 12:36

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.

IFrame not scrolling on IOS Safari

2 Answers2