I encountered a peculiar issue that bears resemblance to the fixed element problems on iOS highlighted on Stack Overflow, but with a unique twist. This anomaly only occurs when the parent document is scrollable and involves the use of an iframe. Below is a simplified representation of the HTML structure I am working with:
<body>
/*
main content
*/
<div class="myCtrl">
<iframe src="page2.htm"/> // iframe with input element within HTML page
<div></div>
</div>
</body>
.myCtrl is styled as follows:
.myCtrl {
max-width: none;
max-height: 690px;
width: 100vw;
height: 75vh;
bottom: 0;
z-index: 1000;
right: 0;
}
When certain input elements within the iframe are focused and the soft keyboard appears, .myCtrl gets pushed out of view. However, typing something brings .myCtrl back into view, displaying correctly. On removing focus from an input, .myCtrl remains visible and behaves as expected for the remainder of the browser session, regardless of any input focus.
Both the parent page and the iframe include the following viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />Attempts to resolve the issue using meta tags have been unsuccessful. Using position:absolute is not viable as .myCtrl cannot receive event notifications from input focus.
Applying
-webkit-overflow-scrolling:touch;.myCtrl is appended to the body and the content structure is beyond my control.
Similarly, employing CSS font resizing has proven ineffective.