影响相邻元素背景颜色的不透明度过渡答案

【问题标题】：Opacity transition affecting background color of adjacent element影响相邻元素背景颜色的不透明度过渡
【发布时间】：2013-09-17 19:13:13
【问题描述】：

我正在使用由 JavaScript 滚动事件触发的 CSS 过渡来显示一个元素，但是这种过渡会影响 Mac 上 Safari (5.1.7) 和 Chrome (27.0.1453.93) 中相邻元素的背景颜色 ( 10.6.8），这根本没有意义。我想我偶然发现了一个错误。

我仅使用以下精简代码在 Safari 中复制了该问题并创建了一个 jsfiddle (http://jsfiddle.net/5AEMF/)，但该问题不会在该框架内发生：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
    margin: 0;
    padding: 0;
}

#bar {
    height: 100px;
    background-color: #FF0000;
}

#content {
    opacity: 0;
    height: 9999px;
    background-color: #0000FF;
    -webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#content.scrolled {
    opacity: 1;
}
</style>

<script type="text/javascript">
var scrolled = false;

var init = function() {
    onScroll(null);
    window.addEventListener('scroll', onScroll);
};

var onScroll = function(e) {
    if (window.scrollY > 0 && !scrolled) {
        scrolled = true;
        document.getElementById('content').className = 'scrolled';
    } else if (window.scrollY === 0 && scrolled) {
        scrolled = false;
        document.getElementById('content').removeAttribute('class');
    }
};

window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>

我想知道这个问题是否有解决方法。任何帮助将不胜感激。

【问题讨论】：

我猜是硬件加速的副产品。即使过渡元素没有背面可见性。
我看不到任何错误。哪些元素的背景颜色会受到影响？您可以尝试 jquery 动画，而不是 css 过渡。

标签： javascript html css safari

【解决方案1】：

使用 RGB 格式的颜色例如：color:rgba(255, 106, 0, 0.24) 此属性中的最后一个参数 0.24 是不透明度。使其为0，它将是透明的。

【讨论】：