CSS背景色转换在特定浏览器中不起作用（桌面和移动）

我有一个SCS，理论上，它应该平滑地转换背景颜色，但在特定的浏览器中它并不平滑

有关演示，请参阅此代码笔：

（单击照片或便笺文本以激活转换。如果单击文本，则更为明显。）

在Chrome桌面（版本42.0.2311.152，Mac OS 10.9）和Firefox桌面（版本36.0.4，Mac OS 10.9）中，过渡是平稳的

但是，在Safari（iOS 8.1.3上的桌面版v7.1.3+移动Safari）和iOS上的Chrome mobile（V38.0.2125.59）中，不会转换，而是直接捕捉

---

有人能复制这个问题吗？这是WebKit某些版本中的一个bug，还是我在这里遗漏了什么？可能是我使用的其他转换与这个特定的转换交互不好吗？（同时，我还在

.marknotetexth2

上使用高度转换，在

.markcontent

div上使用jQuery幻灯片效果。）

这个问题似乎是由外部加载的CSS中的语法错误引起的

在中，您将找到此代码

.mark-object .overlay{-webkit-transition:background-color, 200ms, ease;-moz-transition:background-color, 200ms, ease;-ms-transition:background-color, 200ms, ease;-o-transition:background-color, 200ms, ease;transition:background-color, 200ms, ease;

看起来像是被美化了

.mark-object .overlay {
    -webkit-transition: background-color, 200ms, ease;
       -moz-transition: background-color, 200ms, ease;
        -ms-transition: background-color, 200ms, ease;
         -o-transition: background-color, 200ms, ease;
            transition: background-color, 200ms, ease;

如您所见，属性、持续时间和缓和函数之间有逗号，但应该只有逗号来分隔不同的属性

此外，代码笔中的CSS没有外部CSS具体，因此没有效果

您可以在应用的样式中看到Safari如何处理此错误

但是，Firefox错误以不同的方式处理它，假设裸设置为

all

我们可以从计算的样式中看出，非iOS Chrome与Firefox具有相同的功能

---

当然，Chrome在iOS上的表现与Safari相同的原因是，根据苹果的要求，iOS Chrome使用了与Safari相同的渲染引擎。

我不确定我是否遵循-符号的作用是什么？我能够在手机上重现感知到的抓拍效果（iOS Safari 8.0）。我可以使用says

transition

来支持：（）。我想知道，由于优化了电池性能设置，iOS是否会忽略此转换？@Katana314这是SCSS语法@gmeben抱歉，在问题描述中没有注意到。起初我想看看标签，但它不在那里。哇-超级描述性的答案，非常感谢你的长时间解释。我认为，由于Safari计算的

转换

没有出错或删除，因此它的解析是正确的。要是生活中所有的麻烦都是在错误的地方用逗号就好了。还感谢您了解我添加的SCS的特殊性，以及关于iOS Chrome使用Safari渲染引擎的说明——很高兴知道。

.mark-object .overlay {
    -webkit-transition: background-color, 200ms, ease;
       -moz-transition: background-color, 200ms, ease;
        -ms-transition: background-color, 200ms, ease;
         -o-transition: background-color, 200ms, ease;
            transition: background-color, 200ms, ease;