Question

我有一个奇怪的情况，听起来非常像Stack Overflow上的many fixed element issues with iOS，但有一个扭曲。仅当父文档可滚动时才会发生这种情况。我也在使用iframe。下面是我正在显示的HTML的表示

<body>
   /*
    main content
    */

   <div class="myCtrl"> 
     <iframe src="page2.htm"/>//iframe contains html page with an input element
     <div></div>
   </div>
</body>

.myCtrl的风格为：

 .myCtrl {
    max-width: none;
    max-height: 690px;
    width: 100vw;
    height: 75vh;
    bottom: 0;
    z-index: 1000;
    right: 0;
}

iframe包含几个输入元素，当聚焦时（弹出软键盘），.myCtrl被推出视图。如果我输入内容，.myCtrl会重新显示以查看并正确显示。如果我从输入中删除焦点，.myCtrl不会离开视图并正确保持放置。无论输入是否具有焦点，.myCtrl将在浏览器会话的其余部分正常运行，尊重position:fixed。

父页面和iframe标题中都有<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />。

Meta标签解决方案似乎无法运作。

使用position:absolute似乎不可行，因为.myCtrl无法从输入焦点接收任何事件通知。

-webkit-overflow-scrolling:touch;似乎不可行，因为.myCtrl附加到正文，我无法控制内容结构。

css font resizing似乎也无效。

Answer 1

我有同样的问题，这就是我想出来解决它的问题。问题是Iframe容器正在失去他的位置（我的是固定的）并且它被改为绝对。

所以我希望在键盘打开时修复它，并确保窗口不会滚动太多。

所以这是代码：

window.onscroll = function () {//is called when the keyboard is open
    if (window.pageYOffset > window.innerHeight / 3) {//my decision you can play with it as you would like 
        window.scrollTo(0, window.innerHeight / 3);
        if (document.getElementById('IframeWrapperID').style.position !== 'fixed')  {
            document.getElementById('IframeWrapperID').style.position = 'fixed';
        }
    }
};

*我的iframe绝对位置。希望它有所帮助。

iOS 8.3固定HTML元素在输入焦点上消失

1 个答案: