Mobile Safari - iframe fixed content

Question

Mobile Safari forces iframes to their content size.

So when there's a fixed div inside the iframe it doesn't fix. Is there a CSS property to force iframe to scroll in mobile and respect fixed content?

Note: The fixed content is inside the iframe, not in the container, so div scrolling wouldn't fix this.

<iframe src="page-with-fixed-content" style="width: 100%; height: 100%;">
    <!-- Fixed layer on the page loaded to iframe -->
    <div style="position: fixed; top:0;">
        Not Fixed on iPhone (Fixed on desktop)
    </div>
</iframe>

CodePan Example

This problem has been fixed in IOS Safari 13. There is no need of a workaround there. — Murali Nepalli, Oct 07 '19 at 11:32

Murali Nepalli · Accepted Answer · 2019-03-08T06:36:31.147

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/

+101 Looks like a good place to begin :) That’s the only answer so far that actually works on mobile Safari, thanks! — Avishay Cohen, Mar 10 '19 at 11:03

score 0 · Answer 2 · answered Feb 28 '19 at 12:02

0

If you have a fixed element in the iframe, it remains fixed when you view the content. However, it is possible that a media query changes the CSS property so that element is no longer fixed in a mobile version.

You can try this with the boostrap navbar. In the PC version, the navbar is fixed, while in the mobile version, it is no longer fixed.

PC version :

Mobile version :

Can you show us the code of the web page displayed in the iframe?

answered Feb 28 '19 at 12:02

Rémi M.

300
2
11

Thanks, but could you take a look at the CodePen example on an iPhone browser? Not chrome inspect - it behaves differently. – Avishay Cohen Feb 28 '19 at 13:56
1

You're right, I have the same behavior on an IOS device. You can look at this [solution](https://stackoverflow.com/a/10816492/11124723), but it requires access to the page inserted in the iframe. – Rémi M. Feb 28 '19 at 17:32
Thanks, yeah, the issue is with the fixed content. And on that reference, it's how to scroll the iframe containing div. – Avishay Cohen Mar 03 '19 at 08:44

score 0 · Answer 3 · answered Mar 06 '19 at 11:20

0

Is your iframe fixed?

iframe{
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   width:100%;
   height:100%;
   overflow:auto;
}

answered Mar 06 '19 at 11:20

Rajilesh Panoli

770
10
17

Sorry, still doesn't do the trick - See this on iPhone Safari: https://codepen.io/avishic/pen/PLWpma – Avishay Cohen Mar 06 '19 at 13:58

score -1 · Answer 4 · answered Mar 08 '19 at 12:30

With the release of iOS 5, fixed positioned layout is said to be supported in MobileSafari.

The word supported needs to be taken with a pinch of salt, because there's all kinds of issues which I intend to show you in the following post.

Note that I have filed bugs for a number of these during the beta of iOS 5 - but god knows how the Radar Apple thing works, so I don't know the issue numbers. https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ How to fix it? Easy. Search StackOverflow. This question has been asked previously:

position: fixed doesn't work on iPad and iPhone
Fixed positioning in Mobile Safari

score -1 · Answer 5 · answered Mar 10 '19 at 07:24

-1

adding transform: translate3d(0,0,0); to the fixed position element.

div {
  position: fixed;
  transform: translate3d(0,0,0);
}

answered Mar 10 '19 at 07:24

Imon

659
1
4
11

Mobile Safari - iframe fixed content

5 Answers5