Ошибка перехода непрозрачности Chrome

Question

Итак, я пытаюсь создать ссылку с двумя div. Оба покрывают 50% экрана. Я хотел бы сохранить этот 100% CSS, потому что я не хочу использовать javascript, и я не familiair с JQuery.

Моя проблема, кажется, ошибка, согласно множеству сообщений stackoverflow. Но ни у кого из них нет рабочего решения для меня .. Css работает так же, как я планировал в каждом браузере, за исключением Chrome и Safari.

Вот пример моего 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> 

И мой CSS является одинаковым с обеих сторон

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

Так что, когда я наведите курсор мыши (для некоторых вещей, как left:0 и такие, за исключением) на моем левом изображении изображение исчезает в течение нескольких секунд (около 10 секунд), а затем перезагружается. Единственное, что я вижу, это синий фон, пока изображение не перезагрузится.

Странно, что этого не происходит на моем собственном изображении. Этот образ работает так, как ожидалось.

Я попробовал несколько вещь, как предложил на другие должности, как

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0);

-webkit-perspective: 1000;

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

postition: static; (был лучший результат с вот этот , но все же бесполезно, потому что изображение не будет растянуто и застряло в левом углу)

И так далее. Даже один из них не работал :( Что я хочу достичь? - Я хочу, чтобы изображение было на фоне div, на котором я не витаю (так что он смутно виден сквозь непрозрачность) - Изображение должно быть . полностью видимым (без непрозрачности), когда ДИВ наведен

Обе функциональные возможности работают во всех браузерах, кроме Chrome и Safari

Любые решения

по запросу:.? jsfiddle (открыть это с Chrome или Safari для ошибки)

Answer 1

Я конденсировал несколько правил :hover и, похоже, решил это.

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

Демо:https://jsfiddle.net/hopkins_matt/mxbjja29/2/