小编Aro*_*ron的帖子

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