I am facing a situation similar to the one discussed in the question (iOS 8.3 fixed HTML element disappears on input focus), but my problem differs slightly. My chatbox iframe is embedded within a scrollable parent, and when the iframe is activated, it expands to occupy the entire viewport.
<body>
<!-- CONTENT OF THE PARENT PAGE -->
<div class="webchat-container">
<div class="webchat-header-container">Chat Box</div>
<!-- The iframe comprises a reply bar with a text input positioned at the bottom -->
<iframe src="chatapp"/>
</div>
</body>
The .webchat-container is styled with basic mobile properties:
.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);
}
When active, .webchat-container acquires this extra style:
.webchat-container.open {
height: 100%;
}
On focusing on the text input within the reply bar, the child iframe communicates with the parent using postMessage() to indicate that the input is in focus. This helps in applying specific classes for iOS devices due to how iOS handles fixed positioning inadequately.
A .no-scroll class is introduced to the parent's body:
body.no-scroll {
position: fixed !important;
top: 0;
bottom: 0;
}
and a particular class is assigned to the responsive container containing the iframe:
.webchat-container.ios-positioning.open {
position: absolute !important;
overflow: hidden;
top: 0 !important;
bottom: 0 !important;
}
While there is a slight flicker when the input is focused, the aforementioned adjustments achieve the desired outcome. The software keyboard slides up, the reply bar sits above it, and the chat widget adequately fills the screen without any bizarre rendering glitches or zooming issues.
Now comes the catch....
If I dismiss the keyboard by tapping "done" and then refocus on the input, there are instances where the .webchat-container becomes invisible, with only the cursor blinking visible (indicating that the element is present in its correct location). Even upon inspecting the element in Safari, it shows being correctly positioned but transparent/invisible. The application and removal of classes from the element work as intended.
I have tried dismissing and re-focusing the keyboard at different speeds and intervals, sometimes resulting in a correct repaint and at times not. It seems to occur randomly. Triggering an animation on focus to force a repaint did not yield any results either. Hence, I am unsure if this issue stems from lazy repainting.
The chat application within the iframe uses React on the client-side and C# & asp.net on the server-side.
If anyone has insights into what might be causing this periodic invisibility of elements, and better yet, suggestions on resolving this matter, your input would be greatly appreciated. Dealing with the idiosyncrasies of iOS has been quite challenging, and this remains the final hurdle I am struggling to overcome.