盖茨比图像 Chrome 闪烁 Windows 10

Question

我有一个 React Gatsby 网络应用程序，我有一个组件可以呈现答题卡，每张卡片上都有一个图像。我知道 windows 10 和 chrome 有一个已知问题，可以通过禁用硬件加速来解决，但我的网站是唯一一个出现如此严重闪烁的网站。我已尝试重构所有内容以获得最佳性能，但问题仍然存在。

我知道这个 Google Chrome Flicker Unable to Find Cause 解决了这个问题，但用户不会这样做，因为即使对我来说，这也是唯一发生这种情况的网站。

我的组件看起来像这样。

<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>

我几乎什么都试过了。删除 flex 并不能解决问题。如果我删除图像，问题就解决了。任何帮助表示赞赏。

Answer 1

找到了。虽然一般来说 Chrome + Windows 的闪烁问题是固定的，但似乎有些情况下硬件加速仍然很困难。

在我的例子中，我有一个 div 元素，带有过滤器灰度 CSS 并且应用了两个框阴影（对于上面的卡片未选择状态）。可能 chrome 渲染器在将滤镜应用于 box-shadow 元素时出现问题，从而导致闪烁。我将滤镜移到了内部图像元素（无论哪种方式都更有意义），问题已解决。

盖茨比图像 Chrome 闪烁 Windows 10

Gatsby Image Chrome flicker on Windows 10

windows

google-chrome

reactjs

gatsby