Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ios safari input text disappearing

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?

like image 535
Alex Freeman Avatar asked Apr 18 '16 15:04

Alex Freeman


2 Answers

You can add

transform: translate3d(0, 0, 0);

to the input's style.

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

like image 59
pacog Avatar answered Oct 31 '22 01:10

pacog


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.

like image 35
Alex Freeman Avatar answered Oct 31 '22 03:10

Alex Freeman