Chrome 中的过渡/不透明度渲染问题？

Posted 2023-03-06

【中文标题】Chrome 中的过渡/不透明度渲染问题？

【英文标题】：transition/opacity rendering issues in Chrome?

【发布时间】：2015-10-04 18:17:38

【问题描述】：

我遇到了 CSS 不透明度过渡的问题。它似乎在 Chrome 上运行不佳 - 大多数时候。

当它起作用时，它非常不稳定 - 不透明度大约为 1/2，然后是完全的。 当它不起作用时，它会变得不完全不透明，并停在那里。

我做错了什么？当我第一次实现这个时（我认为是 6 月中旬），我认为它运行良好。由于它有时会过渡到完全不透明，我不完全确定它是否曾经在 Chrome 中完全工作。但我和我的客户大约在同一时间（分别）注意到它 - 6 月下旬/7 月初。

这是我的 html 和 CSS 代码，以及 JSFiddle。 （可能比我需要复制这个错误多一点）

.fade 
   opacity:0;
   transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -webkit-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;

#submenu 
   opacity:0;
   position:absolute;
   left:185px;

#submenu a 
   width: 90px;
   padding: .4em .5em;

.horizontal-menu2 
   opacity:inherit;
   position:absolute;
   left:113px;

.horizontal-menu1 
   opacity:inherit;
   position:absolute;
   left:5px;

.image-menu 
   opacity:inherit;
   position:absolute;
   right:175px;

.person:hover #submenu 
   opacity: 1;

<ul>
  <li class="person"><a href="#">Person One</a>
    <ul class="fade" id="submenu">
        <li class="horizontal-menu1"><a onclick="#">menu1</a></li>
        <li class="horizontal-menu2"><a href="#">menu2</a></li>
        <li class="image-menu"><img src="#" ></li>
    </ul>
  </li>
</ul>

我知道 Chrome v. 40 中的一个旧错误，但那是在 1 月份（我认为），我现在在 v. 43 上

它似乎是similar issue to this，但我的确实有时会起作用，所以也许这个人的问题没有完全解决。 此外，这种类型的其他问题较旧 - 有些是 Chrome v. 40（现已修复）错误的直接结果。

【参考方案1】：

您的渲染错误似乎与在具有过渡不透明度的元素的子级上使用opacity: inherit; 有关。如果您删除这些行，它会按预期运行。

工作示例 (JSFiddle)：

.fade 
    opacity:0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;

#submenu 
    opacity:0;
    position:absolute;
    left:185px;

#submenu a 
    width: 90px;
    padding: .4em .5em;

.horizontal-menu2 
    position:absolute;
    left:113px;

.horizontal-menu1 
    position:absolute;
    left:5px;

.image-menu 
    position:absolute;
    right:175px;

.person:hover #submenu 
    opacity: 1;

<ul class="interview-menu">
    <li class="person"><a href="#">Person One</a>
        <ul class="fade" id="submenu">
            <li class="horizontal-menu1"><a onclick="#">menu1</a>
            </li>
            <li class="horizontal-menu2"><a href="#">menu2</a>
            </li>
            <li class="image-menu">
                <img src="#" >
            </li>
        </ul>
    </li>
</ul>

纯属猜测，但我猜它是在转换期间缓存从父元素继承的值，而不是在转换期间更新它。

【讨论】：

就是这样！谢谢！我想我在这样做的早期就写了opacity: inherit;，因为它没有转换所有这些，然后我可能修复了真正的错误并将其留在了那里。