工作示例（JSFiddle）：

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月份（我想），现在我已经在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>

纯粹的推测，但我猜它是在转换过程中的某个时刻缓存它从父元素继承的值，而不是在转换期间更新它。

Chrome中的转换/不透明度渲染问题？

1 个答案:

工作示例（JSFiddle）：