使用 box-shadow 时，Firefox 中的 CSS3 3D 过渡闪烁答案

【问题标题】：CSS3 3D Transitions flickering in firefox when also using box-shadow使用 box-shadow 时，Firefox 中的 CSS3 3D 过渡闪烁
【发布时间】：2012-09-02 19:41:26
【问题描述】：

我有一个使用 CSS3 过渡和 3D 变换构建的类似苹果的 Coverflow 元素。

http://jsfiddle.net/7eDkb/1/（带框阴影的过渡）

在 chrome 上运行流畅，但在 Firefox 上，封面在制作动画时会在可见和不可见之间闪烁。

在消除过程之后，我发现从项目中删除“box-shadow”css 属性会导致在 firefox 中平滑过渡。

http://jsfiddle.net/7eDkb/2/（没有盒子阴影的过渡）

我已经在 firefox v15 和 chrome v21 中对此进行了测试。

有没有解决方案可以在一个元素上同时使用 3d 过渡和 box-shadow 而不会在 firefox 上闪烁？

编辑：在小提琴中，单击灰色图像以查看闪烁

【问题讨论】：

您只能用 Firefox 的图像替换阴影。这需要一些 javascript，所以它现在可能是最好的解决方案。我认为 Firefox 的渲染引擎还没有真正实现。 Chrome 的道具：D

标签： html firefox css css-transitions

【解决方案1】：

没有人回答这个问题是有充分理由的，这是一个 Firefox 错误。

我已将此提交给 bugzilla，并被确认为错误。

https://bugzilla.mozilla.org/show_bug.cgi?id=790239

正如@Kyle 在他的评论中所说，当前最好的解决方案是在 firefox 的情况下使用不优雅的 box-shadow 替代方案。

【讨论】：