不透明度 < 1 的元素不在第一列时不在 chrome 中呈现
Elements with opacity < 1 not rendering in chrome when not in first column
我的网站分为多个栏。每当元素不在第一列中且不透明度设置为 < 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。
这看起来像是一个渲染错误。现在,您可以通过将 will-change: opacity
应用于父元素来减轻影响:
.main > div {
overflow-y:auto;
border-radius: 6px;
will-change: opacity;
}
花药显然是在父元素上设置不透明度:
<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>
似乎有效。 (你好像忘了关闭你的div,所以我也这样做了)
由于 issue in chrome 似乎不会很快修复并且 will-change: opacity
修复不允许 pointer/click 事件,我决定只计算rgb 值将具有所需的不透明度并将它们硬编码在 CSS.
中
我对禁用的按钮使用了不透明度,并且在这个特殊情况下只使用了一些 bootstrap 按钮类型,所以这不是太糟糕的 hack。
.btn.btn-success[disabled] {
opacity: 1;
background: rgb(141, 194, 141);
}
.btn.btn-info[disabled] {
opacity: 1;
background: rgb(120, 187, 206);
}
我的网站分为多个栏。每当元素不在第一列中且不透明度设置为 < 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。
这看起来像是一个渲染错误。现在,您可以通过将 will-change: opacity
应用于父元素来减轻影响:
.main > div {
overflow-y:auto;
border-radius: 6px;
will-change: opacity;
}
花药显然是在父元素上设置不透明度:
<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>
似乎有效。 (你好像忘了关闭你的div,所以我也这样做了)
由于 issue in chrome 似乎不会很快修复并且 will-change: opacity
修复不允许 pointer/click 事件,我决定只计算rgb 值将具有所需的不透明度并将它们硬编码在 CSS.
我对禁用的按钮使用了不透明度,并且在这个特殊情况下只使用了一些 bootstrap 按钮类型,所以这不是太糟糕的 hack。
.btn.btn-success[disabled] {
opacity: 1;
background: rgb(141, 194, 141);
}
.btn.btn-info[disabled] {
opacity: 1;
background: rgb(120, 187, 206);
}