Firefox和Chrome在呈现box-shadow时似乎存在很大差异。

Question

Firefox和Chrome在呈现box-shadow时似乎存在很大差异。

13

我在Chrome和Firefox中测试了一个盒子阴影效果，惊讶地发现两个浏览器之间的呈现存在显著差异。尤其是，Firefox的渲染要明显暗一些。以下是两张参考图片：

Chrome Firefox

第一张图片是在Chrome 22下呈现的，后者则在Firefox 16下呈现，并且都运行在Mac OS 10.8.2下。我不知道为什么这两张图片呈现出如此不同的效果。这里是盒子阴影本身的代码，在两个浏览器中相同：

box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5);

想要查看实时演示，请点击这里。将鼠标移到方框上即可看到效果。

有没有办法解决这种渲染上的巨大差异？

- Alexis King

2

这个问题已经存在了一段时间，我仍然不知道它的原因：https://dev59.com/AWgu5IYBdhLWcg3wrIuR。 - BoltClock

我的猜测是，这是浏览器公司设计的组件。例如，不同浏览器中的警报弹出框看起来非常不同。如果您想要相同的外观，我认为您必须自己绘制和编码它。 - Allan

5个回答

3

这是Chrome的一个长期存在的bug，该问题已在Chrome 73中得到修复（将于2019年3月发布）。

https://www.chromestatus.com/feature/6569666117894144

历史上，Blink的模糊半径解释与CSS和Canvas2D规范相抵触：Blink阴影覆盖了大约一半预期区域（请参见链接的错误）。通过此更改，高斯模糊sigma现在计算为1/2模糊半径，如规范所规定的那样。 Blink的阴影实现现在与FireFox和Safari匹配。

注意：这个bug比从WebKit分支Blink还要早。 Safari曾经有过不同的图形引擎。

https://bugs.chromium.org/p/chromium/issues/detail?id=179006

因此，保持外观的确切公式是
R' = 2 *（0.288675 * R + 0.5）

R' (new)     R (previously)
Chrome 73+   Chrome 72 and below
1.5px        1px
2px          2px
3px          3px
3px          4px
4px          5px
4.5px        6px

R' ≈ 0.7 * R       for R = 7px ... 12px
R' ≈ 0.6 * R       for R = 22px ... ∞

- j.j.

正如上面的评论指出，你的回答基本上只有两个链接。您介意引用关于变化的最相关部分，以便未来访问者可以更快地查看重要信息吗？ - Filnor

为提供的链接添加了一些引号。 - j.j.

1

可能重置CSS会有帮助：

http://codepen.io/anon/pen/IteyC

- mosa1991

1

请尝试阅读此链接http://stackoverflow.com/help/deleted-answers，以更好地了解如何**不要**回答问题。即：“根本没有回答问题的答案”：**几乎只是一个指向外部网站的链接**。 - Radim Köhler

1

那是因为Chrome和Firefox使用不同的html渲染器。我认为这种巨大的差异是由于拉加颜色引起的，尝试淡化阴影即可。

- doory

0

你正在使用多个盒子阴影，因此尝试这样做（还可以从盒子阴影中删除alpha，我已经为您完成了以下内容）

box-shadow: 0px 1px 3px rgba(0,0,0), 
            inset 0px 4px 2px -2px rgba(255,255,255), 
            inset 0px -3px 1px -2px rgba(0,0,0), 
            inset 0px -20px 200px -100px rgba(0,0,0);

-moz-box-shadow: 0px 1px 3px rgba(0,0,0), 
                 inset 0px 4px 2px -2px rgba(255,255,255), 
                 inset 0px -3px 1px -2px rgba(0,0,0), 
                 inset 0px -20px 200px -100px rgba(0,0,0);

-ms-box-shadow: 0px 1px 3px rgba(0,0,0), 
                inset 0px 4px 2px -2px rgba(255,255,255), 
                inset 0px -3px 1px -2px rgba(0,0,0), 
                inset 0px -20px 200px -100px rgba(0,0,0);

-webki-box-shadow: 0px 1px 3px rgba(0,0,0), 
                   inset 0px 4px 2px -2px rgba(255,255,255), 
                   inset 0px -3px 1px -2px rgba(0,0,0), 
                   inset 0px -20px 200px -100px rgba(0,0,0);

如果仍然存在问题，您是否有任何fiddle或链接，以便我可以适当地进行检查？

- Shehroz Asmat

不要为box-shadow使用前缀。自2011年以来，任何浏览器都已经实现了无前缀的版本，并且Chrome 73中修复了Chrome的错误渲染差异。 - j.j.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thexpand · Accepted Answer

您可以为Firefox创建一个媒体选择器，它将使用不同的样式。您需要尝试一下。例如，我减少了模糊度、扩散度，并增加了最后一个内阴影的不透明度。因此，.box:hover 的 CSS 应该像这样：

.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5));
}

@-moz-document url-prefix() {
.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 130px -120px rgba(0,0,0,0.9));
}
}

您可以访问BrowserHacks.com获取更多媒体选择器和其他浏览器技巧。