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元素在輸入焦點上消失

回答

相關問題