Text colour artifacting when Grid is used within flex/grids

[AdnanBen]

I'm submitting a ... (check one with "x")

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

Current behavior
Having coloured text within a cell and using ag grid with flexboxes/grids means the colour will be affected when any input element on the page is selected

Expected behavior
Colour in cells stay the same

Please tell us about your environment:
Windows

• AG Grid version: X.X.X
  "ag-grid-community": "^31.3.1",
  "ag-grid-react": "^31.3.1",

• Browser:
  Occurs in: Chrome, Edge
  Doesn't occur in: Firefox

• Language: [all]

Plunker: https://plnkr.co/edit/m4SclAllVRUzANOg?open=index.jsx

Although the bug doesn't occur in plunker, running this code locally will produce it. Whenever the text input on the top is clicked into, the red font in the grid cells becomes less bold. I have come across this issue in all forms of flexboxes, grids, MUI grid. This is a minimum reproducible example I came up with.

I couldn't find many posts about Ag Grid being incompatible with flex/grids so was quite surprised how prevalently I've come across this. Tweaking certain elements like the number of divs, etc appears to mutate the problem (certain cells stay coloured, while others don't anymore). I've also seen this issue when having an editable top pinned row, though interestingly I have not been able to reproduce with a bottom pinned row.

I've attached a gif of the occurrence below.

Forcing CSS states (active/focus) does not trigger the issue, and dev tools show no CSS changing

I am prevented from using multiple colourful grids in a single page w/ responsive design because of this - anyone having similar issues would be good to hear

Thanks!

[AdnanBen]

I've found a solution to this by applying the following CSS:

.ag-ltr .ag-cell{
filter:brightness(1) contrast(1)
}

I can only imagine this works because of some sort of separation introduced in how the browser renders these elements due to the filter. It does lessen the intensity of the text but this can be amended with other properties.