html - 不透明度 < 1 的元素不在第一列时不会在 chrome 中呈现

Question

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

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>

我在 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/