Elements with opacity < 1 not rendering in chrome when not in first column

Question

I have a site that gets divided into multiple columns. Whenever an element is not in the first column and has opacity set to < 1, it doesn't get rendered when its container has both the overflow y and border radius properties.

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>

I'm using chrome 40.0.2214.94 (64-bit) on OSX 10.10.1. Works in Firefox.

Answer 1

That looks like a rendering bug. For now you can mitigate the effect by applying will-change: opacity to the parent elements:

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

http://jsfiddle.net/yx1cp9f8/

Answer 2

Anther workaround apparently is to set the opacity on the parent element:

<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>

Seems to work. (you seem to have forgotten to close your divs, so I did that as well)