Search code examples
htmlcssinputparagraph

Text in a paragraph gets darker when i focus input element

I have this simple code for replicate this weird behavior that i can't understand how to solve, when i just click inside the input element the text in the paragraph becomes darker, it seems like it loses some opacity. Focus in and out from the input element by clicking it and you will see this, you can just copy the code and try it's pretty easy to see. I see that with other colors i don't see this behavior but i wanna be free to choose any color i want for the paragraph. Why this happens and how can i prevent any change of the paragraph text when i focus the input element?

body {
  background-color: rgb(57, 57, 57);
}

p {
  color: rgb(243, 0, 0);
}
<input>
<p>I'm just a text that get's weird when i focus the input tag</p>

Solution

  • I'm not sure what is the root cause, but adding will-change:transform on the input can fix the problem. Many times when seeing this sort of problem especially in Chrome, forcing GPU rendering solves the problem.

    body {
  background-color: rgb(57, 57, 57);
}

input {
  will-change: transform;
}

p {
  color: rgb(243, 0, 0);
}
    <input>
<p>I'm just a text that get's weird when i focus the input tag</p>