Safari 和 Firefox 对比 chrome - css 渐变

Question

我遇到了一个特殊的情况，chrome vs safari + firefox 在渐变的渲染方式上有很大的不同。

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(56,56,56,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(56,56,56,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#383838',GradientType=0 ); /* IE6-9 */

我认为 chrome 一个是正确的版本，我如何让 safari + ff 以相同的方式运行？

左边是 safari，右边是 chrome。

Answer 1

简短的回答是你不知道。

长话短说，对于它们应该如何从起始梯度值到最终值，没有强制规定的具体方法。硬件加速会将其传递给任何显卡的渲染引擎，但供应商处理它的方式因渲染引擎而异，就像 none 硬件渐变填充将留给各个浏览器引擎一样。

如果你真的需要它们尽可能靠近（注意我没有说相同）那么你将不得不求助于使用超大图像作为背景并调整其位置以适应可用区域。所有这些都意味着不同屏幕尺寸下的结果略有不同。

当然有些浏览器根本不会呈现渐变。

如果您真的想要，您可以尝试更改起始值、值和百分比，但这需要大量工作，而且效果取决于您的用户监视器有多好，所以并不是很有用。

所以实际上这对用户（不是你）真的很重要。如果它们确实碰巧在浏览器之间切换（为什么会这样）并且在特定浏览器上使用时始终保持一致，它将看起来非常相似（甚至接近）。字体在浏览器之间呈现不同，标记的呈现在不同 OS / 平台上的相同浏览器之间会有差异。

重要的是不要在每个平台/OS/浏览器上保持像素相同，因为那是不可能的。而是让您的用户清楚、一致地访问他们需要的信息。

Safari 和 Firefox 对比 chrome - css 渐变

safari and firefox vs chrome - css gradients

html

css

gradient