How to Properly Display an Iframe in Mobile Safari

How to get an IFrame to be responsive in iOS Safari?

The solution for this problem is actually quite simple and there are two ways to go about it. If you have control over the Content.html then simply change the div#ScrolledArea width CSS to:

width: 1px;
min-width: 100%;
*width: 100%;
    

Basically the idea here is simple, you set the width to something that is smaller than the viewport (iframe width in this case) and then overwrite it with min-width: 100% to allow for actual width: 100% which iOS Safari by default overwrites. The *width: 100%; is there so the code would remain IE6 compatible, but if you do not care for IE6 you can omit it. Demo

As you can see now, the div#ScrolledArea width is actually 100% and the overflow: scroll; can do it's thing and hide the overflowing content. If you have access to the iframe content, then this is preferable.

However if you do not have access to the iframe content (for what ever reason) then you can actually use the same technique on the iframe itself. Simply use the same CSS on the iframe:

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

However, there is one limitation with this, you need to turn off the scrollbars with scrolling="no" on the iframe for this to work:

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

If the scrollbars are allowed, then this wont work on the iframe anymore. That said, if you modify the Content.html instead then you can retain the scrolling in the iframe. Demo

IFrame height issues on iOS (mobile safari)

It looks like this: How to get an IFrame to be responsive in iOS Safari?

iFrames have an issue on iOS only, so you have to adapt your iframe to it.

You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.

Wishing you luck.

Mobile Safari - iframe fixed content

I faced this challenge couple of months back while working on a webapp, After researching quiet a bit, The "Shadow DOM "approach suggested in the following article helped.

https://medium.com/@dvoytenko/amp-ios-scrolling-redo-2-the-shadow-wrapper-approach-experimental-3362ed3c2fa2.

 var sd = document.body.attachShadow({mode: 'open'});

 // Main slot will absorb all undistributed children.
 var mainSlot = document.createElement('slot');
 var scroller = document.createElement('div');
 scroller.style = 'background: lightblue; position: absolute; top: 
  0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;';
  scroller.appendChild(mainSlot);
  sd.appendChild(scroller);

// Selectively, it's also possible to distribute fixed elements separately,
// emulating fixed layer transfer.
 var fixedLayer = document.createElement('div');
 fixedLayer.style = 'height: 0; width: 0; position: fixed; 
  overflow:visible;';
 sd.appendChild(fixedLayer);

 var mainFixedSlot = document.createElement('slot');
 mainFixedSlot.setAttribute('name', 'fixed');
 fixedLayer.appendChild(mainFixedSlot);

function addToFixedLayer(element) {
 //var slotId = String(Math.random());
 //var fixedSlot = document.createElement('slot');
 //fixedSlot.setAttribute('name', slotId);
 //fixedLayer.appendChild(fixedSlot);
 //element.setAttribute('slot', slotId);
 element.setAttribute('slot', 'fixed');
} 

 /*Call and pass fixed elemetns to addToFixedLayer method so that they stay 
 fixed while scrolling */

 addToFixedLayer(fixedDivId)

Check this demo https://jsfiddle.net/rsva63ep/

IFRAMEs and the Safari on the iPad, how can the user scroll the content?

iOS 5 added the following style that can be added to the parent div so that scrolling works.

-webkit-overflow-scrolling:touch

---

Related Topics