設置元素的不透明度會中斷Chrome中父級的滾動

Question

我遇到了一個我完全不理解的錯誤，並且我無法在網絡上找到解決方案。

我的設置很簡單：我有一個容器與各種兒童。容器（在屏幕截圖中標記爲紅色）具有固定的高度和overflow-y auto。滾動功能與預期一致。

.card-details-container { 
    height: 500px; 
    overflow-y: auto; 
} 

但是，當我改變所包含的一個孩子的不透明度，它突然中斷：

.barchart .barchart-bars div { 
    opacity: .5; 
} 

我只遇到了在Chrome這個bug （41.0.2272.118）。我不知道爲什麼會發生這種情況。任何幫助表示讚賞！

Answer 1

嘗試：

/* Theoretically for IE 8 & 9 (more valid) */ 
/* ...but not required as filter works too */ 
/* should come BEFORE filter */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

/* This works in IE 8 & 9 too */ 
/* ... but also 5, 6, 7 */ 
filter: alpha(opacity=50); 

/* Older than Firefox 0.9 */ 
-moz-opacity:0.5; 

/* Safari 1.x (pre WebKit!) */ 
-khtml-opacity: 0.5; 

/* Modern! 
/* Firefox 0.9+, Safari 2?, Chrome any? 
/* Opera 9+, IE 9+ */ 
opacity: 0.5; 

此外，檢查邊界。