Javascript 影响相邻元素背景色的不透明度转换
我展示了一个使用CSS转换的元素，该转换是由JavaScript滚动事件触发的，但是该转换会影响Mac（10.6.8）上Safari（5.1.7）和Chrome（27.0.1453.93）中相邻元素的背景色，这毫无意义。我想我偶然发现了一只虫子 我仅使用以下精简代码在Safari中复制了该问题，并创建了一个JSFIDLE（），但该问题并未出现在该框架中：Javascript 影响相邻元素背景色的不透明度转换,javascript,html,css,safari,Javascript,Html,Css,Safari,我展示了一个使用CSS转换的元素，该转换是由JavaScript滚动事件触发的，但是该转换会影响Mac（10.6.8）上Safari（5.1.7）和Chrome（27.0.1453.93）中相邻元素的背景色，这毫无意义。我想我偶然发现了一只虫子 我仅使用以下精简代码在Safari中复制了该问题，并创建了一个JSFIDLE（），但该问题并未出现在该框架中： <!DOCTYPE html> <html lang="en-US"> <head> <meta c
<!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>
影响相邻元素颜色的不透明度转换
* {
保证金：0；
填充：0；
}
#酒吧{
高度：100px；
背景色：#FF0000；
}
#内容{
不透明度：0；
高度：9999px；
背景色：#0000FF；
-webkit过渡：不透明度0.25s缓进缓出；
-moz过渡：不透明度0.25s缓进缓出；
-o型过渡：不透明度0.25s缓进缓出；
过渡：不透明度0.25s缓进缓出；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
}
#内容。滚动{
不透明度：1；
}
var scrolled=false；
var init=函数（）{
onScroll（空）；
window.addEventListener（'scroll'，onScroll）；
};
var onScroll=函数（e）{
如果（window.scrollY>0&&！已滚动）{
滚动=真；
document.getElementById（'content'）。className='scrolled'；
}else if（window.scrollY==0&&scrolled）{
滚动=假；
document.getElementById（'content'）。removeAttribute（'class'）；
}
};
addEventListener（'load'，init）；
我想知道这个问题是否有解决办法。任何帮助都将不胜感激。使用RGB格式的颜色，例如：
颜色：rgba（255，106，0，0.24）