transition/opacity Chrome 中的渲染问题？

Question

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

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

我做错了什么？当我第一次实施它时（我认为是 6 月中旬），我认为它运行良好。因为它有时会过渡到完全不透明，所以我不完全确定它是否在 Chrome 中完全工作。但我和我的客户几乎在同一时间（分别）注意到了它——7 月下旬 June/early。

这是我的 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 中的一个旧错误，但那是在一月份（我认为），我现在在 v. 43

它似乎是，但我的有时似乎确实有效，所以也许这个人的问题没有完全解决。此外，此类其他问题较旧 - 有些是 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>

纯属猜测，但我猜它是在过渡期间的某个时刻缓存它从父元素继承的值，而不是在过渡期间更新它。

transition/opacity Chrome 中的渲染问题？

transition/opacity rendering issues in Chrome?

css

google-chrome

opacity

css-transitions

工作示例（JSFiddle）：