导致渐变带的原因以及如何解决它？

Question

最近我正在编写一些线性和径向渐变，我注意到它们在 Chrome 中显示得很好，但在 Safari 中却有条带。从与此主题相关的许多其他问题来看，似乎情况恰恰相反（在 Safari 中看起来不错，但在 Chrome 中却有条带），并且在渲染渐变方面，不同浏览器之间通常存在一些不一致。

我的问题是，什么原因导致梯度带？为什么会发生这种情况（我注意到它可能发生在数字和印刷设计中），是什么导致在某些浏览器中发生条带，以及确保渐变在跨浏览器上正确显示的最佳实践解决方案是什么？

Answer 1

CSS 渐变在浏览器引擎中的实现和渲染方式不同。渐变越复杂，条带越多，浏览器之间的差异就越大。没有完美的跨浏览器美学解决方案。

// Complex banding that will produce banding
background-image: linear-gradient(-155deg, #FFF 0%, #444 20%, #666 40%, #888 60%, #999 80%, #000 100%);

一些解决方案：

• 使用重复图像：1px 高度的图像。
• 简化梯度：使用最少的梯度步骤

background-image: linear-gradient(-155deg, #FFF, #000 100%);

• 使用像 tailwindcss 这样的库https://tailwindcss.com/docs/gradient-color-stops来管理渐变。
• 模糊背景以掩盖条带

filter: blur(8px);
background-image: linear-gradient(-155deg, #FFF 0%, #444 20%, #666 40%, #888 60%, #999 80%, #000 100%);