Chrome opacity transition bug

Question

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.

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.

Here is an example of my HTML:

<div id="left">
  <div id="leftImage">
     //the background image
  </div>
  <div id="overlayLeft">
     //a logo that goes on top of the image when not hovering over it
  </div>
</div>
<div id="right">
  <div id="rightImage">
     //the background image
  </div>
  <div id="overlayRight">
     //a logo that goes on top of the image when not hovering over it
  </div>
</div>

And my CSS is the same on both sides (except for some things like left:0 and such)

#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; 
}

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.

The strange thing is that this does not happen on my right image. That image is working just as expected.

I've tried a few thing like suggested on other posts, like

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0);

-webkit-perspective: 1000;

transform: translate3d(0px,0px,0px);

postition: static; (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)

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.

Both of the functionalities are working in all browsers except Chrome and Safari.

Any solutions?

as requested: jsfiddle (open this with Chrome or Safari for the bug)

Can you add a JSFiddle? – Evan Mulawski May 07 '15 at 18:25 — Evan Mulawski, May 07 '15 at 18:25

score 1 · Accepted Answer · answered May 07 '15 at 18:54

I condensed a few :hover rules and that seems to have solved it.

CSS:

body {
    background: #ffff;
}
/* Setup for the halves of the screen */
 #right {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 50%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    background: #389A7A;
    background-size:cover;
}
#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;
}
/* Setup for the image containers */
 #rightImage, #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;
}
#rightImage:hover, #leftImage:hover {
    opacity:1.00;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
    background: rgba(0, 0, 0, 1.0);
}
#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft {
    visibility: hidden;
}
/* Setup for the images */
.rightImage {
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0px;
    right: 0;
}
.leftImage {
    /* Set rules to fill background */
    min-width: 50%;
    min-height: 100%;
    /* Set up proportionate scaling */
    width: 50%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0px;
    left: 0;
}
/* Setup for the logo image */
#overlayLeft {
    visibility: visible;
}
.overlayLeft {
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    left: 30%;
    pointer-events: none;
}
#overlayRight {
    visibility: visible;
}
.overlayRight {
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    right: 30%;
    pointer-events: none;
}

Demo: https://jsfiddle.net/hopkins_matt/mxbjja29/2/

Chrome opacity transition bug

1 Answers1