Gatsby Image Chrome 在 Windows 10 上闪烁

Question

I have a React Gatsby web app and I have a component that renders answer cards with an image on each card. I know there is a known issue with windows 10 and chrome which is fixed by disabling hardware acceleration, but my site is the only one that I have such bad flickering. I have tried to refactor everything to have the best performance but the issue persists.

I know that this Google Chrome Flicker Unable to Find Cause solves the issue, but users will not do this since even for me this is the only site that this happens.

My components look something like this.

<div className="flex flex-wrap justify-center py-10 px-8">
  {answers.map((e) => (
    <Field key={e.id} type="radio" name={id} value={e.answerId}>
      {() => {
        return (
          <div
            onClick={onClick}
            className="flex flex-col justify-around w-32 h-44 2k:w-48 2k:h-72 shadow-3xl rounded-md mx-2 my-3 cursor-pointer transform transition-transform"
          >
            <div className="flex-1" />
            <div className="inline-block px-2 m-3">
              <img src="https://w7.pngwing.com/pngs/247/929/png-transparent-potato-food-anime-potato-food-manga-cartoon.png" />
            </div>
          </div>
         );
      }}
    </Field>
  ))}
</div>

I have tried almost everything. Removing flex does not fix the issue. If I remove the image the issue is fixed. Any help appreciated.

Answer 1

Found it. Although in general the flickering issue with Chrome + Windows is fixed, it seems that there are cases where hardware acceleration is still struggling.

In my case I had a div element with filter grayscale CSS and both box-shadow applied (for the card unselected state above). Probably chrome renderer had issues applying the filter to the box-shadow element so that caused the flickering. I moved the filter to the inside image element (which makes more sense either way) and the issue was fixed.