Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS mobile: scrolling in iFrame within scroll-able parent

I'm experiencing an issue in mobile iOS safari where scrolling in a div that contains an iFrame is impossible when dragging inside the iFrame itself:

#outside{
height: 400px;
width: 200px;
background: blue;
overflow: scroll;
}

.space{
  height: 200px;
  width: 200px;
  background: red;
}

iframe{
height: 1000px;
width: 200px;
background-color: green;
}
The green section is the iFrame.... Scrolling on the green section in iOS mobile is the issue

<div id="outside">
<div class="space"></div>
<iframe>

</iframe>
<div class="space"></div>
</div>

So, when dragging on the iFrame, since it has no scroll, it should scroll the parent, but instead, the whole page is scrolled.

Any known workarounds for this bug? It is already working on Android.

like image 632
Skeets Avatar asked Jun 07 '17 22:06

Skeets


People also ask

How do I enable scrolling in iframe?

1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars. 2) Set the width attribute of the iframe to 200% (width="200%"). This will enable only the horizontal scroll bar.

How do I get scroll position in iframe?

TO get the scroll position use the attributes scrollX and scrollY that exists in the window object. Returns null or undefined for cross domain iframes.

Does HTML5 support scrolling attribute?

The <iframe> scrolling attribute is not supported in HTML5. Use CSS instead. The scrolling attribute specifies whether or not to display scrollbars in an <iframe>. Normally, scrollbars appear in an <iframe> when the content is larger than the <iframe>.


1 Answers

Place your <iframe>s in wrappers with -webkit-overflow-scrolling: touch;

.iContainer {
  -webkit-overflow-scrolling: touch;
}

#outside {
  height: 400px;
  width: 200px;
  background: blue;
  overflow: scroll;
}

.space {
  height: 200px;
  width: 200px;
  background: red;
}

iframe {
  height: 1000px;
  width: 200px;
  background-color: green;
  border: none;
  display:block;
}

iContainer {
  -webkit-overflow-scrolling: touch;
}
The green section is the iFrame.... Scrolling on the green section in iOS mobile is the issue

<div id="outside">
  <div class="space"></div>
  <div class="iContainer">
    <iframe>
    </iframe>
  </div>
  <div class="space"></div>
</div>

Special note: Using this in conjunction with position:relative on <body> causes IoS devices to sometimes block the scroll. Letting it fully revert from it's "bounce" fixes it, but it still feels wrong and buggy.
So make sure you don't have any set position on your <body> or <html>. Took me a bit to debug this quite recently.

like image 191
tao Avatar answered Oct 05 '22 23:10

tao