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

Posted 2023-03-06

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

【英文标题】：CSS background-color transition not working in specific browsers (desktop + mobile)

【发布时间】：2015-08-23 16:04:13

【问题描述】：

我有这个 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 幻灯片效果。）

【问题讨论】：

不确定我是否遵循 - 和号是干什么用的？

我能够在我的手机（iOS Safari 8.0）上重现感知到的捕捉效果。 Can I Use 说应该支持transition: (caniuse.com/#search=transition)。我想知道由于优化的电池性能设置，iOS 中是否会忽略此转换？

@Katana314 这是 SCSS 语法。 Read up

@gmeben 抱歉，在问题描述中没有注意到它。起初我想查看标签，但它不存在。

【参考方案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 的要求。

【讨论】：

哇 - 超级描述性的答案，非常感谢您的长时间解释。我假设由于 Safari 的计算 transition 没有错误或删除线，所以它解析正确。如果生活中所有的麻烦都只是逗号放在错误的地方就好了。也感谢您了解我添加的 SCSS 的特殊性，以及有关使用 Safari 渲染引擎的 iOS Chrome 的说明——很高兴知道。