Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iframe content scroll issue

See original GitHub issue

iframe content doesn’t scroll properly when touch is initiated, eg, in the center of the content. It will scroll if touch is initiated on the left or right edge of the content. Not sure if this is related to closed issue iframes block scrolling #306 .

I’m using Ionic v1.0.1-beta, Cordova v3.4.1-0.1.0, iOS 7.1 .

eg, I replaced the tab-dash.html content, generated via ionic start myApp tabs, with:

<ion-view title="Dashboard">
  <ion-content scroll="true" class="has-header padding">
    <h1>Dashboard0</h1>

<iframe src="http://xkcd.com" style="width:100%;height:100%"></iframe>

  </ion-content>
</ion-view>

Issue Analytics

State:
Created 9 years ago
Comments:23 (3 by maintainers)

Top GitHub Comments

11reactions

brickpopcommented, May 27, 2015

+1 @jorgecasar ! Thank you

This made my day:

<ion-content scroll="true" overflow-scroll="true" class="iframe-wrapper">
   <iframe data-tap-disabled="true" src="{{iframeURL}}"></iframe>
</ion-content>

5reactions

jorgecasarcommented, Jan 30, 2015

I had the same issue and I fixed with this example: https://github.com/alexgzhou/brandNewiCYL/commit/6d877424896394f78e7efaeccbbeddfb72b487a9

CSS:

.iframe-wrapper iframe {
   width: 100%;
   height: 100%;
 }

HTML:

<ion-content scroll="true" overflow-scroll="true" class="iframe-wrapper">
   <iframe data-tap-disabled="true" src="{{iframeURL}}"></iframe>
</ion-content>

@JonathanAquino, about the YouTube iframes I guess it’s because the video catch the tap event. I recommend you to use directly the video iframe in the correct size, then you don’t have to do scroll. This is the full video url: https://www.youtube.com/v/{{videoId}}.