Élément en mouvement avec effet javascript - hoppy dans Safari et Firefox

Question

Fondamentalement, j'essaie de déplacer un élément en fonction de la position de défilement. Le problème que j'ai est que lors du défilement sur Firefox et Safari (MacOS) l'élément agit bizarrement et saccadé que le positionnement ne se met pas à jour à temps ou quelque chose. Parfois, vous devez faire défiler plusieurs fois pour le voir. Firefox a un lissage supplémentaire qui rend les choses encore plus laides. L'élément doit être relativement positionné (doit respecter le dépassement de capacité: caché).

L'exemple de code est ci-dessous:

HTML:

<div class="container"> 
    <div id="block"></div> 
</div> 

CSS:

.container{ 
    height: 800vh; 
    width: 100%; 
} 
#block{ 
    width: 300px; 
    height:50px; 
    background: #000; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

JS:

var block = document.getElementById('block'); 

window.addEventListener('scroll', function(){ 
    block.style.top = window.pageYOffset*1.2 + "px"; 
}); 

et un lien CodePen: https://codepen.io/maciejgunia/pen/gxQReo

Merci pour vos suggestions.

EDIT: voici le comportement observé - Je sais que certaines personnes voient différemment - https://jumpshare.com/v/RhU7gNYAlMFwDo7HIl5Z

Answer 1

ajouter transition: top 1s;-#block CSS cela lisser votre animation