CODEWITHSUNDEEP
ioscssinputsassmobile-safari
Adam
Adam

Reputation: 51

iOS input field - when typing text is invisible

There's something wrong with various input fields, when I type on iOS mobile safari (only) the text is invisible.

However for this section of the site, I cannot target via CSS it as it's an iframe.

Any ideas of

  1. why does this happen?
  2. how to resolve it?

I have to force a blur or the GPU by adding transform: translateZ(0); in order to resolve it. However I cannot use CSS on this element.

gif of issue

Upvotes: 2

Views: 1552

Answers (1)

Adam
Adam

Reputation: 51

Placing 

-webkit-overflow-scrolling: touch;

Causes the issue, I believe it's due to the way Safari handles scrolling / layering with this switched on. The way to fix it is to force the GPU using 

transform: translateZ(0);

On the parent element that can be controlled.

Upvotes: 2

Related Questions