Elementi con opacità <1 non rendering in cromo quando non nella prima colonna

Question

Ho un sito che viene diviso in più colonne. Ogni volta che un elemento non si trova nella prima colonna e l'opacità è impostata su < 1, non viene visualizzato quando il contenitore ha sia le proprietà di overflow y che di raggio del bordo.

Shown in this fiddle

css

.main { 
    -webkit-column-width: 100px; 
    column-width: 100px; 
    max-height: 200px; 
} 

.main > div { 
    overflow-y:auto; 
    border-radius: 6px; 
} 
.opac { 
    opacity: 0.5; 
} 

html

<div class="main"> 
    <div> 
     <div class="opac">element 1</div> 
    </div> 
    <div> 
     <div class="opac">element 2</div> 
    </div> 
    ... 
    <div> 
     <div class="opac">element 30</div> 
    </div> 
</div> 

sto usando Chrome 40.0.2214.94 (64-bit) su OSX 10.10.1. Funziona in Firefox.

Answer 1

Poiché lo issue in chrome non sembra che verrà risolto in qualsiasi momento presto e la correzione will-change: opacity non consente gli eventi puntatore/clic, I Ho deciso di calcolare solo quali sarebbero i valori di rgb con l'opacità desiderata e di indicarli nel CSS.

Stavo usando l'opacità per i pulsanti disabilitati e utilizzavo solo alcuni dei tipi di pulsanti di avvio per questo caso particolare, quindi non è un brutto problema.

.btn.btn-success[disabled] { 
    opacity: 1; 
    background: rgb(141, 194, 141); 
} 
.btn.btn-info[disabled] { 
    opacity: 1; 
    background: rgb(120, 187, 206); 
} 

Answer 2

Sembra un bug di rendering. Per ora è possibile attenuare l'effetto applicando will-change: opacity agli elementi padre:

.main > div { 
    overflow-y:auto; 
    border-radius: 6px; 
    will-change: opacity; 
} 

http://jsfiddle.net/yx1cp9f8/

Answer 3

Antera soluzione a quanto pare è quello di impostare l'opacità sul l'elemento principale:

<div class="main"> 
<div class="opac"> 
    <div >element 1</div> 
</div> 
<div class="opac"> 
    <div >element 2</div> 
</div> 
... 
<div class="opac"> 
    <div >element 30</div> 
</div> 

Sembra funzionare. (sembra che tu abbia dimenticato di chiudere i tuoi div, quindi l'ho fatto anche io)