Elements with opacity <1 not rendering in chrome, if not in the first column

Question

I have a website that is divided into several columns. Whenever an element is not in the first column and has an opacity set to <1, it cannot be displayed when its container has both overflow properties y and borders.

Shown in this script

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 am using chrome 40.0.2214.94 (64-bit) on OSX 10.10.1. It works in Firefox.

Answer 1

Since the problem in chrome does not seem to be fixed soon, and the will-change: opacity fix will-change: opacity not allow the pointer / click events, I decided to just calculate that the rgb values ​​will be with the desired opacity and hard code in CSS.

I used opacity for disabled buttons and only used a few types of boot buttons for this particular case, so it's not so bad for hacking.

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

Answer 2

This seems like a rendering error. For now, you can soften 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 3

Peter's workaround, apparently, is to set the opacity to 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> 

It seems to need work. (you seem to have forgotten to close your divs, so I did it too)