title: Chrome opacity transition bug
body: <p>So i'm trying to build a link page with 2 divs. 
  Both covering 50% of the screen. I would like to keep this 100% CSS, because I don't want to use javascript and I am not familiair with Jquery. </p>
  
  <p>My problem seems to be a bug, according to lots of stackoverflow posts. Yet none of them have a working solution for me.. 
  The css works just like I planned in every browser, except for Chrome and Safari. </p>
  
  <p>Here is an example of my HTML:</p>
  
  <pre><code>&lt;div id="left"&gt;
    &lt;div id="leftImage"&gt;
       //the background image
    &lt;/div&gt;
    &lt;div id="overlayLeft"&gt;
       //a logo that goes on top of the image when not hovering over it
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="right"&gt;
    &lt;div id="rightImage"&gt;
       //the background image
    &lt;/div&gt;
    &lt;div id="overlayRight"&gt;
       //a logo that goes on top of the image when not hovering over it
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS is the same on both sides (except for some things like <code>left:0</code> and such)</p>
  
  <pre><code>#left {
      /* Set rules to fill background */
      min-height: 100%;
      min-width: 50%;
  
      /* Set up proportionate scaling */
      width: 50%;
      height: auto;
  
      position: fixed;
      top: 0;
      left: 0; 
  
      background: #0C4270;
      background-size:cover;  
  }
  
  #leftImage {    
      opacity:0.15;
      filter: alpha(opacity=15); /* For IE8 and earlier */
      background: rgba(0, 0, 0, 0.15);    
      -webkit-transition: opacity 2.00s ease;
      -moz-transition: opacity 2.00s ease;        
      transition: opacity 2.00s ease; 
      position: relative;     
      overflow: hidden;   
  }
  
  #leftImage:hover {
      opacity:1.00;
      filter: alpha(opacity=100); /* For IE8 and earlier */
      background: rgba(0, 0, 0, 1.0); 
  }
  
  #leftImage:hover + #overlayLeft{
      visibility: hidden; 
  }
  </code></pre>
  
  <p>So when I hover over my left image the image dissapears for a few seconds (about 10 seconds) and then reloads. The only thing I see is a blue background till the image reloads. </p>
  
  <p>The strange thing is that this does not happen on my right image. That image is working just as expected.</p>
  
  <p>I've tried a few thing like suggested on other posts, like</p>
  
  <p><a href="https://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue">-webkit-backface-visibility: hidden;</a></p>
  
  <p><a href="https://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body/15203880#15203880">-webkit-transform: translateZ(0);</a></p>
  
  <p><a href="https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker">-webkit-perspective: 1000;</a></p>
  
  <p><a href="https://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue">transform: translate3d(0px,0px,0px);</a></p>
  
  <p><a href="https://stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with">postition: static;</a> 
  (had the best result with this one, but still useless, because the image won't be streched and would be stuck in the left corner)</p>
  
  <p>And so on. Not even one worked :(
  What do I want to achieve? 
   - I want the image to be on the background of the div i'm not hovering over (so it is vaguely visible trough the opacity)
   - The image should be fully visible (no opacity) when the div is hovered. </p>
  
  <p>Both of the functionalities are working in all browsers except Chrome and Safari. </p>
  
  <p>Any solutions?</p>
  
  <p>as requested: <a href="https://jsfiddle.net/mxbjja29/" rel="nofollow noreferrer">jsfiddle</a> (open this with Chrome or Safari for the bug)</p>