CODEWITHSUNDEEP
cssgoogle-chromecss-transitionsopacity
Michael S
Michael S

Reputation: 736

transition/opacity rendering issues in Chrome?

I am having an issue with a CSS opacity transition. It doesn't seem to work well on Chrome - most of the time.

When it does work, it is very choppy - goes to about 1/2 opacity, then full. When it doesn't work, it goes to less than full opacity, and stops there.

What am I doing wrong? I thought it had been working well when I first implemented this (mid June, I think). Since it does transition to full opacity sometimes, I'm not entirely sure that it was ever fully working in Chrome. But both me and my client noticed it (separately) at about the same time - late June/early July.

Here is my HTML and CSS code, and a JSFiddle. (Possibly a little more than I need to replicate this error)

.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>

I'm aware of an old bug in Chrome v. 40, however that was back in January (I think) and I'm on v. 43 now

It appears to be a similar issue to this, however mine does appear to work sometimes, and so perhaps this persons' issue isn't fully resolved. Also, the other questions of this type are older - some are a direct result of Chrome v. 40's (now fixed) bug.

Upvotes: 1

Views: 6614

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60537

Your rendering bug appears to be related to the use of opacity: inherit; on the children of an element with transitioning opacity. If you remove these lines, it behaves as expected.

Working Example (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>

Pure speculation, but I'm guessing it's caching the value it inherits from the parent element at some point during the transition, and not updating it during the transition.

Upvotes: 3

Related Questions