11

I am working on a website and stumbled upon this bug

In the moment I start typing in the input field the first letter is with normal color but all the others are becoming white so you cannot see what you are typing. It is the same for Chrome and Safari

If I scroll the page up or down it is getting fixed.

Here is a screenshot

enter image description here

Anyone any idea ?

UPDATE: I found the reason, I use -webkit-overflow-scrolling: touch; If I remove it the inputs are working find but I need the scroll: touch because otherwise the site scrolls really weirdly and stucks

user43506
  • 155
  • 3
  • 11
  • Is there any CSS managing an input disabled / onfocusout / ... state? –  Jun 28 '17 at 06:41
  • Try this: `-webkit-text-fill-color:#000;` – Ganesh Yadav Jun 28 '17 at 06:42
  • Try specifying color for the input, input[type=text] { color:#000; } – Hema Nandagopal Jun 28 '17 at 06:50
  • 1
    I just found what is the reason, I use -webkit-overflow-scrolling: touch; If I remove it the inputs are working find but I need the scroll: touch because otherwise the site scrolls really weirdly and stucks – user43506 Jun 28 '17 at 06:52
  • Possible duplicate of [iOS textarea text hidden when using -webkit-overflow-scrolling: touch](https://stackoverflow.com/questions/28730103/ios-textarea-text-hidden-when-using-webkit-overflow-scrolling-touch) – redbmk Jul 06 '17 at 22:51

1 Answers1

8

I had the same issue with a textarea. What helped me to solve it is to add a:

transform: translateZ(0);

on the textarea. Give it a shot.

freese
  • 81
  • 1
  • 2
  • This fixed it for me, but the issue only happens on certain inputs in the app. I can't figure out what is protecting all the others inputs, so there must be another solution. Also, using `-webkit-transform: translateZ(0px)` works, since the issue is webkit specific. – hvaughan3 Aug 09 '18 at 13:49