Mobile Safari - iframe 固定内容

Question

Mobile Safari 将 iframe 强制为其内容大小。

所以当 iframe 中有一个固定的 div 时，它不会修复。 是否有一个 CSS 属性可以强制 iframe 在移动设备中滚动并尊重固定内容？

注意：固定内容在 iframe 内，而不是在容器内，因此 div 滚动无法解决此问题。

<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

Answer 1

几个月前，我在开发 web 应用程序时遇到了这个挑战，在安静地研究了一下之后，以下文章中建议的“Shadow DOM”方法有所帮助。

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)

查看此演示https://jsfiddle.net/rsva63ep/

Answer 2

如果 iframe 中有固定元素，则在查看内容时它会保持固定。 但是，媒体查询可能会更改 CSS 属性，因此该元素在移动版本中不再固定。

您可以尝试使用 boostrap 导航栏。 PC版导航栏是固定的，移动版不再固定。

PC版：

手机版：

你能告诉我们在 iframe 中显示的网页的代码吗？

Answer 3

你的 iframe 修复了吗？

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

Answer 4

随着 iOS 5 的发布，据说 MobileSafari 支持固定定位布局。

“支持”这个词需要谨慎对待，因为我打算在下面的帖子中向您展示各种各样的问题。

请注意，我在 iOS 5 Beta 版期间提交了其中一些问题的错误 - 但上帝知道 Radar Apple 的工作原理，所以我不知道问题编号。 https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ 如何解决？简单。搜索 StackOverflow。之前有人问过这个问题：

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

Answer 5

将transform: translate3d(0,0,0);添加到固定位置元素。

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