元素在输入焦点上随机变为不可见 - Safari IOS答案

【问题标题】：Element randomly going invisible on input focus - safari IOS元素在输入焦点上随机变为不可见 - Safari IOS
【发布时间】：2017-09-09 06:05:03
【问题描述】：

我有一个与此问题 (iOS 8.3 fixed HTML element disappears on input focus) 中所述类似的情况，但我的问题不同。我在可滚动的父级中有一个聊天框 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 和它的各种怪癖已经把我的头发拉了好几天，这是我还没有解决的最后一个问题。

【问题讨论】：

我在覆盖 div 时遇到了完全相同的问题，该 div 有一个加载 React 应用程序的 iframe。我不确定这是否与最近的 iOS 10.3.x 更新有关，但我之前从未见过。在输入字段中输入内容后，iframe 立即消失。有时需要输入几个字符，有时第一个字符会使其消失。
@tukkajukka 有趣的是，在我的场景中，当元素在输入焦点上正确显示时，我在输入时没有任何问题。该元素将在打字时保持正确显示，我可以与 AI 进行长时间的对话，发送多条消息，并且所有内容始终可见。当软键盘被激活时，我的“随机隐形错误”的特殊压力似乎只在焦点上出现。它要么正确显示，要么不可见。
你试过隐藏软键盘有影响吗？
@tukkajukka 不，我没试过。如果罪魁祸首是软键盘，那我就完蛋了，因为我需要显示软键盘，以便我的用户可以键入消息：DI 怀疑它是 ios 固定位置错误的扩展，可能与延迟重绘错误或其他问题相结合.我在这里找到了一种可能的方法blog.mobiscroll.com/…，他们在其中对文本输入进行了核对并敲出一个 div 作为输入。听起来很老套，并且需要更改聊天应用程序，这并不理想，但在这一点上，我愿意尝试任何事情。

标签： javascript ios css mobile-safari

【解决方案1】：

这似乎与 iOS 在输入获得焦点时放大有关。

一旦我打开覆盖元素（包含输入所在的 iframe），我设法通过将 position: fixed; 设置为 body 元素来修复它。将位置设置为fixed 也可以防止滚动底层元素。

【讨论】：