Question

我有一个与此问题（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容器有时会变得不可见，只有闪烁的光标可见（这就是我知道元素仍在那里并处于正确位置的方式）。如果我在Safari中检查元素，则元素的蓝色突出显示也表明它位于正确的位置，但只是不可见/透明。这些类也正确地应用于元素和从元素中删除。

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

iframe中包含的聊天应用是前端的React和C＃＆amp;后端的asp.net。

如果有人知道什么可能导致这种间歇性的元素隐形，甚至更好，任何关于如何解决这个问题的想法，我真的很感激。 IOS及其各种怪癖已经把我的头发拉了好几天，这是我还没有解决的最后一个问题。

Answer 1

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

我打开覆盖元素（包含输入所在的iframe）后，设法将position: fixed;设置为body元素，设法解决了这个问题。将位置设置为fixed也会阻止滚动基础元素。

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

1 个答案: