不在第一列时,不透明度<1的元素不会在镶边中渲染

Question

我有一个分为多个列的网站.每当元素不在第一列并且不透明度设置为<1时,当其容器同时具有溢出y和边界半径属性时,它不会被渲染.

显示在这个小提琴

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>

我在OSX 10.10.1上使用chrome 40.0.2214.94(64位).适用于Firefox.

Answer 1

这看起来像渲染错误.现在,您可以通过应用于will-change: opacity父元素来缓解效果:

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

http://jsfiddle.net/yx1cp9f8/

Answer 2

由于chrome 中的问题似乎不会很快得到修复，并且该will-change: opacity修复不允许指针/单击事件，因此我决定仅计算具有所需不透明度的 RGB 值并将其硬编码为CSS。

我使用了禁用按钮的不透明度，并且仅在这种特殊情况下使用了一些引导按钮类型，因此这并不是太糟糕的黑客行为。

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