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

我有一个奇怪的情况，听起来很像Stack Overflow上的many fixed element issues with iOS，但有一个转折点。这只在父文档可滚动时才会发生。我也在使用iframe。下面是我显示iOS 8.3固定HTML元素在输入焦点上消失

<body> 
    /* 
    main content 
    */ 

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

.myCtrl一个的HTML表示已的风格：

.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似乎也没有工作。

来源

2015-04-15 Mike_G

我有同样的问题，这是我想出来解决它。问题在于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中有位置绝对的。希望它有帮助。

来源

2015-07-28 11:29:57

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

回答

相关问题