Lorsque l'élément est animé avec fadeIn/fadeOut, les éléments sur le dessus scintillent

Question

Démonstration ici sur JSFiddle, une fois que la page charge la transition sera classée après 3 secondes.

Les boutons dans le coin supérieur gauche clignotent lorsque les images s'affichent. Il n'est pas spécifique aux boutons, peut être des divs ou d'autres éléments à la place des boutons. Il n'est pas non plus spécifique à Bootstrap, si vous supprimez Bootstrap CSS, la même chose se produit.

Est-ce que cette vélocité de scintillement est spécifique ou est-ce un problème général avec les animations CSS? Impossible de trouver quelque chose utilisable après environ une heure passée à chercher les interwebs.

Comment est-ce que cela peut être fixé?

N.B. Got avertissement en écrivant ce texte que les liens jsFiddle doivent être accompagnés de leur code, alors voici l'exemple de code:

HTML:

<div class="buttons"> 
    <button class="btn btn-warning">one</button> 
    <button class="btn btn-primary">two</button> 
</div> 
<div id="container"> 
    <!-- CC BY: Timelapse Lezard by Deevad --> 
    <img class="first" src="http://pre02.deviantart.net/6eb5/th/pre/f/2011/237/d/2/timelapse_lezard_by_deevad-d47rwef.png"> 
    <!-- CC BY: The Achkinnal Falls by FerdinandLadera --> 
    <img class="second" src="http://img09.deviantart.net/a98b/i/2012/272/d/4/the_achkinnal_falls_by_ferdinandladera-d5gatw1.jpg"> 
</div> 

CSS:

body 
{ 
    margin: 0px; 
    overflow: hidden; 
    background-color: #000000; 
} 

#container 
{ 
    width: 100%; 
    height: 100%; 
} 

img 
{ 
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
} 

.buttons 
{ 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

Javascript:

$(document).ready(function(){ 

$('.second').hide() 

const showNextImage = function() 
{ 
    $('.first') 
    .velocity('fadeOut', 
    { 
     duration: 500, 
     complete: function() 
     { 
      $('.second') 
      .velocity('fadeIn', 
      { 
       duration: 500 
      }) 
     }, 
    }) 
} 

setTimeout(showNextImage, 3000) 


}) 

Answer 1

Ici c'est corrigé: https://jsfiddle.net/q7phyrsg/2/

Vous avez besoin de z-index: 999 sur vos boutons car les images sont posées dessus.