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

Posted 2023-03-06

【中文标题】不透明度 < 1 的元素不在第一列中时不会在 chrome 中呈现

【英文标题】：Elements with opacity < 1 not rendering in chrome when not in first column

【发布时间】：2015-03-30 10:08:39

【问题描述】：

我有一个分为多个列的网站。每当一个元素不在第一列并且不透明度设置为

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 中工作。

【问题讨论】：

这太疯狂了。听起来您应该将其报告为错误。

是的，这看起来像是一个渲染错误。我在 OSX 上的 Canary 42.0.2291.0 中复制了它。您应该检查已知问题，如有必要，请在 crbug.com 上提出

好的，在这里提交code.google.com/p/chromium/issues/…

相同结果：版本 40.0.2214.93 m - Chrome Windows 7 x64

【参考方案1】：

这看起来像一个渲染错误。现在，您可以通过将will-change: opacity 应用于父元素来减轻这种影响：

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

http://jsfiddle.net/yx1cp9f8/

【讨论】：

是的，解决了它。从来不知道那个属性，所以谢谢！我已经提交了错误报告，因此希望以后不需要修复。

虽然，悬停样式似乎仍然不起作用，除非您减小浏览器窗口宽度然后再次展开它。像 标签不显示指针光标或下划线本身 (jsfiddle.net/tnyj3mtc/3)。但至少他们出现了。

这真的很有趣。好地方！

【参考方案2】：

另一个解决方法显然是在父元素上设置不透明度：

<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，所以我也这样做了）

【讨论】：

我怀疑任何导致父元素被提升到自己的层的东西都会这样做。

哎呀，从 jsfiddle 复制时忘记关闭它们。现在修好了。对我来说，父 div 的样式是不可能的，因为实际的网站有点复杂。

【参考方案3】：

由于issue in 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);