ios safari input text disappearing

Question

I am having a strange problem with input in ios safari as shown here.

The input is part of an angular app and has some basic checks for ng-length and ng-pattern. Initially as you type all the characters are showed, but if you play around with the page a bit, like tapping out, scrolling up and down, then tapping in again only the first 2 letters of what you type will show and the rest will be invisible, but the cursor will still move.

The input also uses a custom web font, but removing it did not fix the problem.

Is this a known bug and is there a workaround?

Answer 1

You can add

transform: translate3d(0, 0, 0);

to the input's style.

This will form a new stacking context and solve the problem.

Answer 2

I found my problem: an iframe being positioned absolute, hidden, from which I listen to the resize event as a solution of monitoring a div width. Removing position:absolute from it fixed it.