不透明度转换影响相邻元素的背景颜色

我使用由JavaScript滚动事件触发的CSS转换来揭示元素，但是此转换影响Safari（5.1.7）和Chrome（）中相邻元素的背景颜色在Mac（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>

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

来源

2013-05-30 Andrew

硬件加速的副产品我猜。即使转换元素没有背面可见性。 – Andrew

我不能看到任何错误。哪些元素bg颜色受到影响？你可以尝试jquery动画，而不是css转换。 – user1721135

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

来源

2013-09-17 11:13:13

不透明度转换影响相邻元素的背景颜色

回答

相关问题