6

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?

Alex Freeman
  • 233
  • 5
  • 15
  • I've seen issues with Safari autofill. Do you know if your browser is autofilling for you? Here's a thread: http://stackoverflow.com/questions/14965968/angularjs-browser-autofill-workaround-by-using-a-directive – panzhuli Apr 18 '16 at 15:32
  • I have all this on the input: autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" – Alex Freeman Apr 18 '16 at 15:49

2 Answers2

5

You can add

transform: translate3d(0, 0, 0);

to the input's style.

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

pacog
  • 119
  • 1
  • 5
  • This is my second time fixing this issue. `transform: translateZ(0px)` worked previously, but apparently not anymore. translate3d did the trick in Safari 12.1 on iOS 12.4 – Jette Feb 19 '20 at 13:59
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.

Alex Freeman
  • 233
  • 5
  • 15