输入焦点时，iOS 8.3固定HTML元素消失 [英] iOS 8.3 fixed HTML element disappears on input focus
问题描述
我有一种奇怪的情况，听起来很像堆栈溢出的iOS的许多固定元素问题，但有一个转折。这只在父文档可滚动时才会发生。我也在使用iframe。以下是我正在显示的HTML表示形式
< body>
/ *
主要内容
* /
< div class =myCtrl>
< iframe src =page2.htm/> // iframe包含带有输入元素的html页面
< div>< / div>
< / div>
< / body>
.myCtrl 的样式为：
.myCtrl {
最大宽度：无;
最大高度：690px;
宽度：100vw;
身高：75vh;
bottom：0;
z-index：1000;
right：0;
}
iframe包含若干个输入元素，在聚焦时（并弹出软键盘） ， .myCtrl 被推出视图。如果我键入内容， .myCtrl 会重新显示并显示正确。如果我从输入中移除焦点， .myCtrl 不会离开视图并正确保持放置状态。然后，对于浏览器会话的其余部分， .myCtrl 将正确行为，并且尊重 position：fixed ，而不管输入
父页面和iframe都有< meta name =viewportcontent =width = device-width ，标题中的initial-scale = 1，maximum-scale = 1，user-scalable = no/> 。元标记解决方案似乎不起作用。使用位置：绝对的
似乎不可行，因为 .myCtrl 无法从输入焦点收到任何事件通知。
-webkit-overflow-scrolling ：touch; 似乎不可行，因为 .myCtrl 被添加到主体，并且我无法控制内容结构。
css font resizing 似乎也不起作用。
我有同样的问题，这是我想出了以解决这个问题。
问题在于Iframe容器正在失去其位置（我的位置已修复），并且它变为绝对位置。
所以我希望它在修复时打开键盘，确保窗口不会滚动太多。
所以这里是代码：
window.onscroll = function（）{//当键盘打开时调用
if（window.pageYOffset> window.innerHeight / 3）{//我的决定你可以像使用
一样玩它。window.scrollTo（0，window.innerHeight / 3）;
if（document.getElementById（'IframeWrapperID'）。style.position！=='fixed'）{
document.getElementById（'IframeWrapperID'）。style.position ='fixed';
}
}
};
*我的iframe具有绝对位置。
希望它有帮助。
I have a strange situation that sounds very much like the many fixed element issues with iOS on Stack Overflow, but with a twist. This only happens when the parent document is scrollable. I am also using an iframe. Below is a representation of the HTML I am displaying
<body>
/*
main content
*/
<div class="myCtrl">
<iframe src="page2.htm"/>//iframe contains html page with an input element
<div></div>
</div>
</body>
.myCtrl has a style of:
.myCtrl {
max-width: none;
max-height: 690px;
width: 100vw;
height: 75vh;
bottom: 0;
z-index: 1000;
right: 0;
}
The iframe contains several input elements that when focused (and soft keyboard pops up), .myCtrl is pushed out of view. If I type something, .myCtrl comes back in to view and is displayed correctly. If I remove focus from an input, .myCtrl does NOT leave the view and correctly stays put. The .myCtrl will then behave correctly, respecting position:fixed, for the rest of the browser session regardless if an input has focus or not.
both the parent page and the iframe have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> in the header.
Meta tag solutions don't seem to work.
using position:absolute doesn't seem feasible since .myCtrl is not able to receive any event notifications from input focus.
-webkit-overflow-scrolling:touch; doesn't seem feasible since .myCtrl is appended to the body, and I have no control over the content structure.
css font resizing doesn't seem to work either.
I had the same problem and this is what I came up with in order to solve it. The issue is that the Iframe container is losing his position (mine was fixed ) and it get changed to absolute.
so I wanted it to be fixed when the keyboard is open, and make sure that the window wont scroll too much.
so here is the code:
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';
}
}
};
*My iframe had position absolute. Hope it helped.
这篇关于输入焦点时，iOS 8.3固定HTML元素消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
