在输入焦点上随机隐藏的元素-safari IOS

问题描述：

我有一个与此问题中描述的类似的场景（iOS 8.3 fixed HTML element disappears on input focus），但我的问题是不同的。我有一个可滚动的父级内的chatbox iframe。当iframe打开时，它会展开以填充整个视口。在输入焦点上随机隐藏的元素-safari IOS

<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 { 
    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容器得到这个额外的风格：

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

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

我加入。没有滚动类的父体：

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。

如果任何人有任何想法可能会导致这种间歇性元素隐形，甚至更好，如何解决这个问题的任何想法，我真的很感激它。内部监督办公室及其各种怪癖已将我的头发拉出数日，这是我尚未解决的最后一个问题。

我已经有一个覆盖的div，有一个加载React应用程序的iframe完全相同的问题。我不确定这是否与最近的iOS 10.3.x更新有关，但我之前没有看到。立即在输入字段中输入内容后，iframe消失。有时需要输入几个字符，有时第一个字符会使其消失。 – tukkajukka

@tukkajukka有趣的是，在我的场景中，当元素DOES在输入焦点上正确显示时，输入时没有问题。元素在打字时将保持正确显示，我可以与AI进行长时间对话，发送多条消息，并且所有内容都始终可见。我的特殊应变“随机隐形缺陷”似乎只是在软键盘被激活的情况下才开始关注焦点。它显示正确或不可见。 –

你有没有试过隐藏软键盘会影响事物吗？ – tukkajukka

答

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

我设法通过设置position: fixed;到body元素，一旦打开覆盖元素（包含输入的iframe），就可以解决它。将位置设置为fixed还可防止滚动基础元素。

在输入焦点上随机隐藏的元素-safari IOS

相关推荐