Safari mobile text input issues

Question

This issue happens on my iPhone 6 plus. This issue does not occur on my iphone 5C.

On one of my pages I have an overlay div with a fixed position that is shown when a button is pressed, and on that div there are a few inputs. The overlay div is scrollable to be able to fit all of the inputs. There are a couple of strange things happening when typing in said inputs.

• When typing, the overlay div "floats" upward with every keypress. The page doesn't scroll or anything, the div just moves upward. It's almost as if I was pressing return on a text field and it jumps down to a new line. Once I press done the div returns to the correct position and the text in the input is correct.

• EDIT - Fixed this issue by setting both HTML and Body tags to overflow: hidden when the button to show the div is clicked. I'll leave the issue up in case anyone else runs into this When I tap on one of the inputs and Safari zooms/focuses in on it, sometimes the div disappears, basically it just becomes transparent. Upon investigating, the div (which is fixed) drops all the way to the bottom of the page without the page actually scrolling, which is why it looks like it disappears. When I press "done" it re-appears up top again.

None of this happens on the desktop/"full" version nor on mobile chrome.

Is this a known issue? I had a problem that caused the background to scroll but not the div, until I added this

 -webkit-overflow-scrolling: touch;

Here's the form, the data-binding is for knockout.js

<label class = "overlay_div_label" for ="name">Name</label>
<input type = "text" class = "overlay_div_input" data-bind = "value: name"/>

<label class = "overlay_div_label" for ="email">email</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: email"/>

<label class = "overlay_div_label" for ="city">City</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: city"/>

<label class = "overlay_div_label" for ="contactTime">Contact Time</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: contactTime"/>

Answer 1

I had the same issue. When someone is typing in the input all divs and inpust around that input just disappear. My fix was to add position:relative; to the form tag.

Answer 2

Review your all CSS and make sure not contain any of these tag/tricks

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

But if your problem persist, try change.

-webkit-overflow-scrolling: auto;

Or you can assign z-index for the div element.

I hope I helped.