Comportement de défilement bizarre dans les derniers navigateurs inclus dans Blink (comme Chrome, Opera)

Question

Récemment, j'ai travaillé à la mise en place d'une bibliothèque de composants de vues arborescentes pour Angular. ngx-tree .

Problème

Peu de temps après, j'ai compris comment mettre en place une fonction de défilement virtuel pour cette bibliothèque afin d'obtenir des performances avec de grands ensembles de données, et l'ai fait fonctionner correctement dans Firefox, je suis pris au piège par un comportement bizarre de défilement dans Clignotement -navigateurs inclus (comme Chromium, Chrome, Opera).

Lien vers la démo

Voici la démo plunkr -- https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 voir la mise à jour n° 1 ci-dessous

Situation

• Dans Firefox, Edge et IE 11, ma bibliothèque avec la fonction de défilement virtuel fonctionne comme prévu avec un défilement fluide.
• Cependant, dans Chrome et Opera, lorsque je fais défiler l'arborescence jusqu'à certaines positions, la position de la barre de défilement (qui est la position de l'arbre) est modifiée. scrollTop de la zone de défilement) sautent de haut en bas, ce qui provoque une scintillement vue arborescente et décomposer la fonction de défilement virtuel.

version détaillée du navigateur

• Chrome - 59.0.3071.115
• Firefox - 54.0
• Bord - 40.15063.0.0

autres navigateurs

En Chine, il y a quelques décortiqué les navigateurs dérivés du projet Chromium (comme 360se, le navigateur QQ, le navigateur Sogou, le navigateur UC) avec ancienne version de V8 et blink . Et ils n'ont pas ce comportement bizarre de défilement.

Quelques hypothèses

Est-ce dû à une optimisation de l'implémentation du défilement (comme un défilement fluide) par l'équipe Chromium ?

J'espère obtenir des guides !!! ( )

---

Mise à jour n° 1

Mise à jour du lien de démonstration avec le journal des événements : https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

Il faut tester le défilement avant d'ouvrir devtool pour voir les logs.

Je dois expliquer un peu plus comment le défilement virtuel fonctionne et ce qui cause le scintillement.

D'abord, voir le conception du défilement virtuel .

Un point clé du défilement virtuel est que nous créons une fausse zone de défilement de la même taille que la zone sans défilement virtuel instrumentée. Ainsi, dans une situation optimale, la position de la barre de défilement de la zone de défilement ne devrait pas changer jusqu'à ce que certains événements attendus déclenchent ses changements. Pour l'événement de défilement, nous mettons à jour la vue pour chaque image d'animation.

À l'intérieur d'une zone de défilement à hauteur fixe, nous supposons une vérité que la propriété scrollTop ne changera pas avec un grand pourcentage si nous simulons correctement la hauteur de ces éléments non rendus (il pourrait y avoir des différences entre les deux). un peu d'écart pour la précision du calcul ) dans un cadre d'animation.

Cependant, d'après les résultats que j'ai observés, les navigateurs de la série blink semblent appliquer une stratégie différente pour mettre à jour le scrollTop de l'élément scrollable. Son timing pour mettre à jour le scrollTop est différent de celui des navigateurs non-blink-series. C'est tout ce que j'ai compris jusqu'à présent.

---

Exemples de gifs

Ici j'ai fait quelques gifs pour montrer la sortie de Chrome, Firefox, et Edge.

Chrome

Firefox

Bordure

Answer 1

Vous tirez la bibliothèque de la virtual-scroll-demo-branch branche :

'ngx-tree': 'https://rawgit.com/e-cloud/ngx-tree/virtual-scroll-demo-branch/src/lib',

Cette branche est 105 commits derrière master. Elle définit incorrectement margin-top sur l'un des éléments intérieurs. C'est corrigé dans les nouvelles versions .

Edit : Le développeur a en fait fait référence à cette question de Stack Overflow dans leur message de validation .