我有一个与这个问题中描述的类似的场景(iOS 8.3 固定的 HTML 元素在输入焦点上消失)，但我的问题不同。我在可滚动的父级中有一个聊天框 iframe。当 iframe 打开时，它会展开以填充整个视口。
<body>
<!-- PARENT PAGE CONTENT -->
<div class="webchat-container">
<div class="webchat-header-container">blah blah chat</div>
<!-- Iframe contains a reply bar with a text input with fixed positioning to the bottom -->
<iframe src="chatapp"/>
</div>
</body>
.webchat-container 有一组基本的移动样式：
.webchat-container {
width: 100%;
height: 70px;
position: fixed;
bottom: 0;
z-index: 50;
transition: height 300ms ease-in-out;
-webkit-transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);
}
打开时，.webchat-container 会获得以下附加样式：
.webchat-container.open {
height: 100%;
}
在回复栏中文本输入的焦点上，子 iframe 使用 postMessage() 让父级知道输入具有焦点，所以我是否可以专门为 ios 设备应用一些类来处理 ios 处理固定定位的不幸方式。
我在父级的主体中添加了一个 .no-scroll 类：
body.no-scroll {
position: fixed !important;
top: 0;
bottom: 0;
}
以及包含 iframe 的响应式容器的类：
.webchat-container.ios-positioning.open {
position: absolute !important;
overflow: hidden;
top: 0 !important;
bottom: 0 !important;
}
当输入聚焦时会闪烁，但除此之外，这达到了预期的效果......软键盘向上滑动，回复栏位于键盘上方的位置。聊天小部件仍然正确填充了 100% 的视口，看不到父级或奇怪的缩放或居中错误。
现在对于这个问题....
如果我单击完成关闭键盘，然后再次聚焦输入，.webchat-container 有时会变得不可见，只有闪烁的光标可见(这就是我知道元素仍然存在并且处于正确位置的方式)。如果我在 Safari 中检查该元素，该元素的蓝色突出显示也表明它位于正确的位置，但只是不可见/透明。这些类也正在正确应用于元素并从元素中删除。
我尝试过缓慢、快速、不规则地关闭和重新聚焦键盘，有时它会正确重新绘制，有时不会。它似乎是随机的。我还尝试过通过触发焦点动画来强制重绘......不行。所以我什至不知道这是否是一个懒惰的重绘问题。
iframe 中包含的聊天应用程序在前端是 React，在后端是 C# & asp.net。
如果有人知道是什么导致了这种间歇性元素的隐形，甚至更好的是，关于如何解决这个问题的任何想法，我将不胜感激。IOS及其各种怪癖已经让我拔掉了好几天的头发，这是我还没有能够解决的最后一个问题。
这似乎与输入聚焦时的iOS放大有关。
一旦我打开覆盖元素(其中包含输入所在的 iframe)，我设法通过将position: fixed;设置为body元素来修复它。将位置设置为fixed还会阻止滚动基础元素。