クロムとエッジのjQueryフリッカーで要素を非表示にして表示

Question

jQueryを使って簡単にアニメーションを作成しようとしていますが、Firefoxでは絶対にうまく動作しますが、ChromeとEdgeではちらつきがあります。ここにはjsfiddle、コードは

HTML

<div id="boxes-wrapper"> 
    <div class="box"></div><div class="box"></div><div class="box"></div> 
</div> 

CSS

.box { 
    width: 150px; 
    height: 150px; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
} 

.box:first-child { 
    background: pink; 
} 

.box:nth-child(2) { 
    background: skyblue; 
} 

.box:nth-child(3) { 
    background: gold; 
} 

.box.hover { 
    position: relative; 
    z-index: 20; 
} 

html, body { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

#shadow { 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background: black; 
    opacity: 0.7; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
} 

JavaScriptの

$('.box').hover(function() { 
    $(this).addClass('hover'); 
    $('#shadow').show(); 
}, function() { 
    $(this).removeClass('hover'); 
    $('#shadow').hide(); 
}); 

私はSOにいくつかの質問を掘ってきたが、それらのどれもちらつきを取り除くためにどのように答えていません。

Answer 1

問題は、オーバーレイが非ホバリングボックスを覆っているため、現在は他のものを移動するために消える必要があることです。

フラッシュは、ボックス間のスペースによって引き起こされます。マウスが離されると、オーバーレイが非表示になります。あなたは、CSSの混合物を必要とし、箱ラッパー（コード内のコメント）にオーバーレイ用ホバー移動しますこれを回避するために

：

// remove overlay from this: 
 
$('.box').hover(function() { 
 
    $(this).addClass('hover'); 
 
}, function() { 
 
    $(this).removeClass('hover'); 
 
}); 
 

 
// add this: 
 
$('#boxes-wrapper').hover(function() { 
 
    $('#shadow').show(); 
 
}, function() { 
 
    $('#shadow').hide(); 
 
});

html, 
 
body { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#boxes-wrapper { 
 
    float: left; 
 
    /*this makes the wrapper the same width as the boxes, you may need to add a clear fix after this*/ 
 
} 
 
.box { 
 
    width: 150px; 
 
    height: 150px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: top; 
 
} 
 
.box:first-child { 
 
    background: pink; 
 
} 
 
.box:nth-child(2) { 
 
    background: skyblue; 
 
} 
 
.box:nth-child(3) { 
 
    background: gold; 
 
} 
 
.box.hover { 
 
    position: relative; 
 
    z-index: 20; 
 
} 
 
#shadow { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background: black; 
 
    opacity: 0.7; 
 
    z-index: 10; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* add the following - means that the mouse hover will "go through" the overlay */ 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="boxes-wrapper"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div id="shadow"></div>