CSS背景颜色转换无法在特定浏览器中使用（桌面+移动设备）

Question

我有这个SCSS，理论上应该平滑地转换背景颜色，但在特定的浏览器中并不流畅。

请参阅此codepen以获取演示：http://codepen.io/ahegyi/pen/Wvjajy

（单击照片或注释文本以激活过渡。如果单击文本，则更明显。）

.overlay {
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;

  background-color: rgba(0,0,0,0.3);

  &.reveal {
    background-color: rgba(0,0,0,0);
  }
  &.conceal {
    background-color: rgba(0,0,0,0.7);
  }
}

在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移动版（版本38.0.2125.59）中，请勿转换，而是直接捕捉。

有人可以重现这个问题吗？这是某些WebKit版本中的错误，还是我在这里遗漏了一些东西？可能是我使用的其他转换与这个特定的转换交互不畅吗？ （与此同时，我也使用.mark-note-text h2上的高度转换，以及.mark-content div上的jQuery幻灯片效果。）

Answer 1

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

在this file中，您会找到此代码。

.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;

如您所见，属性，持续时间和缓动函数之间有逗号，但只应使用逗号分隔不同的属性。

此外，CodePen中的CSS与外部CSS相比没那么具体，所以它没有任何效果。 If you were to increase the specificity, your pen would work.

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

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

我们可以从计算出的样式中看出非iOS Chrome与Firefox相同。

当然，Chrome的行为与iOS上的Safari相同的原因是因为iOS Chrome使用与Safari相同的呈现引擎，这符合Apple的要求。