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

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/

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)

Since the issue in chrome doesn't seem like it will be fixed anytime soon and the will-change: opacity fix doesn't allow pointer/click events, I've decided to just calculate what the rgb values would be with the desired opacity and hard code them in CSS.

I was using the opacity for disabled buttons and was only using a few of the bootstrap button types for this particular case, so it's not too bad of a hack.

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