Pixi.js: Lorsque vous redimensionnez la toile, un arrière-plan blanc scintille

J'utilise le code comme celui-ci pour corriger ce bug :

    game.renderer.resize(game.viewportWidth - 1, game.viewportHeight);
    setTimeout(function() {
        game.renderer.resize(game.viewportWidth, game.viewportHeight);
    }, 1);

C'est tellement moche ， Qui pourrait me faire une meilleure suggestion ？

Certainement ，Le meilleur moyen est de le signaler à l'équipe Chrome.
Qui pourrait le faire ? Mon anglais est trop faible pour décrire ce bug。

nouveau Chrome non ce problème.

Je voudrais confirmer que cela se produit toujours sur le bureau Safari (le dernier) et Edge. Pixi v4.3.0.

Edit : en pseudocode, on faisait quelque chose comme

handleWindowDimensionChange(function() {
renderer.resize(window.innerWidth, window.innerHeight)
});

Le redimensionnement de la fenêtre provoque un scintillement laid dans les deux navigateurs mentionnés. Ni chrome ni Firefox.

Quelqu'un a-t-il une idée de ce qui peut potentiellement provoquer le scintillement lors du redimensionnement ? J'ai le même problème dans Electron (testé avec différentes versions, mais en gros, Chromium 56, 58 et 59) et Pixi 4.5.5 (testé sur Linux et macOS) mais uniquement dans un scénario bizarre :

Je redimensionne le moteur de rendu (webgl) en fonction d'un élément conteneur dans le DOM : l'élément conteneur peut changer de taille si la fenêtre est redimensionnée ou déclenchée par un widget redimensionnable implémenté en Javascript. Maintenant, si je redimensionne le moteur de rendu dans le resize la fenêtre et le gestionnaire personnalisé resize du widget (basé sur les événements mousemove ), tout va bien , mais si j'utilise le nouveau ResizeObserver API sur l'élément conteneur à la place, j'obtiens un très mauvais scintillement.

Quelques remarques :

• Le scintillement est causé par l'effacement de l'ensemble du canevas (comme le mentionne l'OP, dans mon cas, ce n'est pas blanc mais transparent): cela est clairement visible lorsque je fais un enregistrement de performance avec des captures d'écran dans les outils de développement: le canevas est vide pendant environ 100 ms pendant le redimensionnement.
• J'ai supposé qu'il s'agissait d'un problème de performances / de synchronisation dans la mesure où ResizeObserver déclenche plus fréquemment, mais ce n'est pas le cas : j'obtiens une fréquence comparable dans les deux scénarios.
• De plus, je limite le redimensionnement lui-même, de sorte que la fréquence de l'appel réel à renderer.resize est identique dans les deux cas ; De plus, l'appel ne se produit dans aucun des gestionnaires d'événements mais est retardé, il me semble donc peu probable que le timing soit à blâmer.
• Ma prochaine supposition était que les valeurs rapportées par le ResizeObserver sont différentes ; il signale la zone de contenu du conteneur et non la zone de délimitation, mais comme il n'y a pas de bordure ou de remplissage impliqué, les valeurs sont les mêmes. De plus, j'arrondis les dimensions aux pixels complets dans les deux scénarios. Vraiment, les dimensions définies et la fréquence sont très similaires dans les deux cas.
• Le scintillement s'arrête si j'augmente le délai d'attente de l'accélérateur à environ 500 ms ou plus
• En utilisant les gestionnaires d'événements de fenêtre/widget, j'ai besoin de mesurer le conteneur à l'aide de getBoundingClientRect() -- pour enregistrer cet appel (provoquant une nouvelle peinture) est en fait une grande raison d'utiliser ResizeObserver mais j'ai pensé que le le manque de peinture supplémentaire peut être à l'origine du scintillement pour une raison quelconque. J'ai donc ajouté un appel inutile à getBoundingClientRect() avant le redimensionnement, mais en vain.

Je ne suis pas trop inquiet, car il existe une solution de contournement viable (en utilisant les deux gestionnaires distincts, au lieu de ResizeObserver ), mais j'aimerais vraiment savoir ce qui cause cela. J'ai également désactivé autoResize et antialias mais cela n'a fait aucune différence. Des idées de ce que je pourrais essayer d'autre?

@inukshuk dans mon cas, la solution s'est avérée très simple : il suffit d'appeler render après le redimensionnement.

app.renderer.resize(width, height)
// Immediately render because resizing clears the canvas
app.render()

Cela a résolu le problème de scintillement pour moi. Gardez à l'esprit que si vous avez des animations en cours d'exécution, il n'affichera que la dernière image jusqu'à votre prochaine boucle de mise à jour et cela pourrait donner un effet de "gel". Si vous voulez qu'il continue de fonctionner correctement, vous devrez appeler votre fonction de mise à jour avant d'appeler render.

Oh merci! @mickdekkers c'est génial, appeler render le fait immédiatement fonctionner avec les rappels ResizeObserver .

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.