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

Question

我遇到了 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="#" alt="photo of person"></li>
    </ul>
  </li>
</ul>

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

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

Answer 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="#" alt="photo of person">
            </li>
        </ul>
    </li>
</ul>

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