Javascript 元素在输入焦点上随机不可见-safari IOS_Javascript_Ios_Css_Mobile Safari

Javascript 元素在输入焦点上随机不可见-safari IOS

javascript ios css

Javascript 元素在输入焦点上随机不可见-safari IOS,javascript,ios,css,mobile-safari,Javascript,Ios,Css,Mobile Safari,我有一个类似问题（）中描述的场景，但我的问题不同。我在一个可滚动的父对象中有一个聊天框iframe。当iframe打开时，它将展开以填充整个视口 <body>  <div class="webchat-container"> <div class="webchat-header-container">blah blah chat</div>

我有一个类似问题（）中描述的场景，但我的问题不同。我在一个可滚动的父对象中有一个聊天框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容器将获得此附加样式：

.webchat-container.open {
    height: 100%;
}

在回复栏中文本输入的焦点上，子iframe使用postMessage（）让父级知道输入具有焦点，因此我可以为ios设备应用一些专门的类来处理ios处理固定定位的不幸方式

我将.no滚动类添加到父级的正文中：

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容器有时会不可见，只有闪烁的光标可见（这就是我如何知道元素仍在那里并处于正确位置的原因）。如果我在Safari中检查该元素，该元素的蓝色高亮显示也表明它位于正确的位置，但只是不可见/透明。这些类也被正确地应用于元素并从元素中移除

我试过慢慢地、快速地、不规则地关闭和重新聚焦键盘，有时它会正确地重新绘制，有时它不会。这似乎是随机的。我还尝试通过在焦点上触发动画来强制重新绘制。。。不起作用。所以我甚至不知道这是否是一个懒惰的重新绘制问题

iframe中包含的聊天应用程序在前端是React，在后端是C#&asp.net

如果有人知道是什么导致了这种间歇性元素的不可见性，更好的是，知道如何解决这个问题，我会非常感激。IOS和它的各种怪癖已经让我毛骨悚然了好几天，这是我还没有解决的最后一个问题。

这似乎与IOS在输入集中时放大有关

我通过设置

position:fixed来修复它添加到body
元素。将位置设置为fixed
也可以防止滚动底层元素。我遇到了与覆盖div完全相同的问题，该div具有加载React应用程序的iframe。我不确定这是否与最近的iOS 10.3.x更新有关，但我以前从未见过。在输入字段中键入内容后，iframe立即消失。有时需要键入几个字符，有时第一个字符会使它消失。@tukkajukka有趣的是，在我的场景中，当元素在输入焦点上正确显示时，我在键入时没有问题。该元素在输入时将保持正确显示，我可以与AI进行长时间对话，发送多条消息，并且所有内容始终可见。当软键盘被激活时，我那特别的“随机隐形虫”似乎只会在焦点上出现。它要么显示正确，要么不可见。你试过隐藏软键盘吗？它会影响东西吗？@tukkajukka不，我没有试过。如果罪魁祸首是软键盘，那么我就完蛋了，因为我需要软键盘来显示，这样我的用户就可以键入消息：D我怀疑这是ios固定位置错误的扩展，可能与懒惰重绘错误或其他东西结合在一起。我在这里找到了一种可能的方法，在这里，他们对文本输入进行核处理，并生成一个div作为输入。听起来有点黑客味，需要对聊天应用程序进行更改，这并不理想，但在这一点上，我愿意尝试任何东西。
.webchat-container.ios-positioning.open {    
    position: absolute !important;
    overflow: hidden;
    top: 0 !important;
    bottom: 0 !important;
}