CSS 背景颜色过渡在特定浏览器（桌面 + 移动）中不起作用

Question

我有这个 SCSS，理论上应该可以平滑地过渡背景颜色，但在特定浏览器中它并不平滑。

查看此代码笔以获取演示：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 中（桌面 v7.1.3 + iOS 8.1.3 上的移动 Safari）和 iOS 上的 Chrome 移动版（v 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 按照 Apple 的要求使用与 Safari 相同的渲染引擎.

CSS 背景颜色过渡在特定浏览器（桌面 + 移动）中不起作用

CSS background-color transition not working in specific browsers (desktop + mobile)

css

safari

mobile-safari

css-transitions

transition