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-contentdiv 上使用jQuery幻灯片效果.)

Answer 1

该问题似乎是由外部加载的 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;

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

此外，CodePen 中的 CSS 不如外部 CSS 具体，因此它没有效果。如果你要提高特异性，你的笔就可以工作。

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

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

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

当然，Chrome 在 iOS 上的行为与 Safari 相同的原因是，根据 Apple 的要求，iOS Chrome 使用与 Safari 相同的渲染引擎。