title: transition/opacity rendering issues in Chrome?
body: <p>I am having an issue with a CSS opacity transition. It doesn't seem to work well on Chrome - most of the time.</p>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>Here is my HTML and CSS code, and a <a href="http://jsfiddle.net/kqL3kn3w/" rel="nofollow noreferrer">JSFiddle</a>. (Possibly a little more than I need to replicate this error)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li class="person"&gt;&lt;a href="#"&gt;Person One&lt;/a&gt;
      &lt;ul class="fade" id="submenu"&gt;
          &lt;li class="horizontal-menu1"&gt;&lt;a onclick="#"&gt;menu1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="horizontal-menu2"&gt;&lt;a href="#"&gt;menu2&lt;/a&gt;&lt;/li&gt;
          &lt;li class="image-menu"&gt;&lt;img src="#" alt="photo of person"&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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</p>
  
  <p>It appears to be a <a href="https://stackoverflow.com/questions/28206401/opacity-transitions-in-chrome">similar issue to this</a>, 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.</p>