Input focus causes unexpected style change to element below it

[yakiya51]

Hello Tailwind Community,

I'd like to ask for help on how to fix this strange bug (?) I've encountered while working on my project.

I have an input field and some text underneath it. When I focus the input field, the underneath it gets thinner by like 1 or 2 pixels. It's driving me insane because it's very noticeable when the text is red and the background is dark. Ideally, The text's style is not affected by the input's gaining focus whatsoever.

It only happens on desktop and when the background is a dark color.

Demo
https://play.tailwindcss.com/ESvELNVHC3

OR (idk when the tailwindcss playground link expires)

1. Go to https://flowbite.com/docs/forms/input-field/#validation (make sure you actually get to the Validation section because the anchor tag doesn't work sometimes)
2. Turn on dark mode using the top right button on the nav bar.
3. While looking at the red "Oh, snapp! Some error message." message, click inside the input field above it.
4. Observe the slight change in the red message's style. If it's hard to tell, keep focusing and unfocusing the input while looking at the
   error message.

Screenshots
Here is the text before the input is focused:

And after the input is focused:

My Thought Process
Initially, I thought it was just a layout shift caused by the border or outline of the input field that appears on focus, but even after adding border-none and outline-none, it still happens. So then, I thought it was the parent container's style that was causing it, but no luck. Then, I thought it was just something deep inside my project that I wouldn't be able to find so I went to see if any other websites had this bug (this is when I found the Flowbite demo). I made sure it wasn't my chrome extensions by trying it on incognito. I made (kind of) made sure it wasn't my computer screen by trying it on a different screen and device. So now I'm reaching out for help...

Any help would be very much appreciated!

[wongjn]

You can try moving the text to its own rendering layer by adding transform-gpu or will-change-transform class to it.

[yakiya51]

Adding will-change-transform solves the issue. Thank you so much!
I'm still wondering why a simple scenario like this calls for such a niche property, though...

[chirag-9121]

I was searching this for hours, even AI wasn't able to help. Thank you!