safari 和 firefox vs chrome - css 渐变答案

【问题标题】：safari and firefox vs chrome - css gradientssafari 和 firefox vs chrome - css 渐变
【发布时间】：2015-02-06 14:41:32
【问题描述】：

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

观察：http://jsfiddle.net/k9z6pt7z/

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 one 是正确的版本，如何使 safari + ff 的行为方式相同？

左 Safari，右 chrome。

【问题讨论】：

标签： html css gradient

【解决方案1】：

简短的回答是你没有。

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

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

当然，有些浏览器根本不会渲染渐变。

如果您真的愿意，您可以尝试更改起始值和百分比，但这需要大量工作，而且效果取决于您的用户监控的好坏，因此并没有那么有用。

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

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

【讨论】：