CODEWITHSUNDEEP
htmlioscsscordova
Suraj
Suraj

Reputation: 373

object/iframe overflow scroll not working in ios (cordova)

I am using cordova 8.1.2 for loading my page in iframe/object. But scrolling not working in iphone.

config.xml content in cordova below

<content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="*" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <preference name="android-targetSdkVersion" value="26" />
    <preference name="loadUrlTimeoutValue" value="700000" />
    <engine name="android" spec="^7.1.2" />
    <engine name="ios" spec="^4.5.5" />

Code used for iframe :

    <html lang="en" class="no-js">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self'">
      <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />    
   </head>
   <body style="overflow:hidden; height:100%;">
      <div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
      <iframe id="frame-one" data-tap-disabled="true" frameborder="0" src="my-url-website"></iframe>
      </div>
   </body>
</html>

Code used for object tag :

   <body style="overflow:hidden; height:100%;">
      <div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
         <object id="previllew-frame" style="width:100%;height:100%" data="my-url-website"></object>
      </div>
   </body>

Please help me, thank you.

Upvotes: 1

Views: 989

Answers (3)

Jeramy Usher
Jeramy Usher

Reputation: 31

Adding the following attribute and value to the iframe fixed the iOS scrolling issue within mobile Safari for me:

scrolling="yes"

However, I am still searching for a solution to this issue when loading an iFrame within a cordova mobile app.

Upvotes: 1

Tahjid Ashfaque
Tahjid Ashfaque

Reputation: 855

It is a common issue with iFrames and ios, I ran into this a while back, but unfortunately I don't remember what exactly worked for me because I tried so many things from so many sources. Try the following

<iframe id="frame-one" data-tap-disabled="true" frameborder="0" src="my-url-website" scrolling="yes"></iframe>

Upvotes: 1

topherPedersen
topherPedersen

Reputation: 671

I've been running into the same problem on iOS for a web related project I'm working on. So I'm pretty sure the problem is Safari/Webkit related. I have not found the solution yet, but the problem does not appear to have anything to do with Cordova. Try seeing if you can figure out how to get your code to work as a webpage in Safari.

EDIT:

Okay, so the answer that I found is that if you set scrolling=no for your iframe, then the bug will go away. Unfortunately the project I'm working on needs to have a scrolling iframe, so that's sort of a problem for me, but I hope this solution helps!

var iFrame = document.getElementById("iFrame");
iFrame.scrolling = "no";

Upvotes: 1

Related Questions