不透明度轉換影響相鄰元素的背景顏色

我使用由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

不透明度轉換影響相鄰元素的背景顏色

回答

相關問題