Pixi.js: Ao redimensionar a tela, há um fundo branco piscando

Eu uso o código como este para corrigir esse bug:

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

É tão feio ， Quem poderia me dar uma sugestão melhor？

Certamente, a melhor maneira é relatar para a equipe do Chrome.
Quem poderia fazer isso? Meu inglês é muito fraco para descrever esse bug。

novo Chrome sem esse problema.

Gostaria de confirmar que isso ainda acontece no Safari para desktop (mais recente) e no Edge. Pixi v4.3.0.

Edit: em pseudocódigo, estávamos fazendo algo como

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

Redimensionar a janela causa tremulação feia em ambos os navegadores mencionados. Não é Chrome ou Firefox.

Alguém tem uma ideia do que pode causar a cintilação no redimensionamento? Tenho o mesmo problema no Electron (testado com versões diferentes, mas basicamente, Chromium 56, 58 e 59) e Pixi 4.5.5 (testado no Linux e macOS), mas apenas em um cenário bizarro:

Estou redimensionando o renderizador (webgl) com base em um elemento de contêiner no DOM: o elemento de contêiner pode mudar de tamanho se a janela for redimensionada ou acionada por um widget redimensionável implementado em Javascript. Agora, se eu redimensionar o renderizador na janela resize e o manipulador resize personalizado do widget (com base em eventos mousemove ), está tudo bem , mas se eu usar o novo ResizeObserver API no elemento de contêiner, em vez disso, recebo uma tremulação muito ruim.

Algumas observações:

• A cintilação é causada por toda a tela sendo apagada (como o OP menciona, no meu caso não é branco, mas transparente): isso é claramente visível quando eu faço uma gravação de desempenho com capturas de tela nas ferramentas de desenvolvimento: a tela fica em branco por cerca de 100ms durante o redimensionamento.
• Presumi que este é um problema de desempenho / tempo em que ResizeObserver dispara com mais frequência, mas não é o caso: obtenho frequência comparável em ambos os cenários.
• Além do mais, estou limitando o próprio redimensionamento, de modo que a frequência da chamada real para renderer.resize seja idêntica em ambos os casos; além disso, a chamada não ocorre em nenhum dos manipuladores de eventos, mas é atrasada, portanto, parece improvável para mim que a culpa seja do tempo.
• Meu próximo palpite foi que os valores informados por ResizeObserver são diferentes; ele relata a caixa de conteúdo do contêiner, não a caixa delimitadora, mas como não há borda ou preenchimento envolvido, os valores são os mesmos. Além disso, estou arredondando as dimensões para pixels completos em ambos os cenários. Na verdade, tanto as dimensões definidas quanto a frequência são muito semelhantes em ambos os casos.
• A oscilação para se eu aumentar o tempo limite do acelerador para cerca de 500 ms ou mais
• Usando os manipuladores de eventos de janela / widget, preciso medir o contêiner usando getBoundingClientRect() - salvar esta chamada (causando uma nova pintura) é na verdade um grande motivo para usar ResizeObserver mas imaginei que a falta de repintura extra pode estar causando a cintilação por algum motivo. Então, adicionei uma chamada desnecessária a getBoundingClientRect() antes do redimensionamento, mas sem sucesso.

Não estou muito preocupado, porque há uma solução alternativa viável (usando os dois manipuladores separados, em vez de ResizeObserver ), mas eu realmente gostaria de saber o que está causando isso. Eu também desativei autoResize e antialias mas isso não fez diferença. Alguma ideia do que mais eu poderia tentar?

@inukshuk no meu caso a solução acabou sendo muito simples: basta chamar render após redimensionar.

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

Isso corrigiu o problema de oscilação para mim. Lembre-se de que, se você tiver animações em execução, elas apenas exibirão o último quadro até o próximo loop de atualização e isso pode causar um efeito de "congelamento". Se você deseja mantê-lo funcionando sem problemas, convém chamar sua função de atualização antes de chamar render.

Ah, obrigado! @mickdekkers isso é incrível, chamar render imediatamente faz com que funcione com os ResizeObserver callbacks.

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente após seu encerramento. Abra um novo problema para bugs relacionados.