fix(theme): elimina o flash de tela cheia no reveal de tema no mobile#68
Merged
Conversation
No celular, trocar o tema piscava o novo tema em tela cheia por 1-2 frames antes do círculo começar. A animação do reveal era criada com root.animate() dentro de transition.ready.then() — um callback agendado. No desktop ele resolve em menos de um frame; no Chrome do celular demora 1-2 frames, e nesse intervalo o snapshot do novo tema é exibido sem o clip-path (tela cheia) — o flash. Move o reveal do WAAPI agendado para uma animação CSS (@Keyframes theme-reveal no ::view-transition-new(root)): ela já está ativa no primeiro frame em que o pseudo- elemento nasce, sem gap, então não há flash. A geometria (origem/raio) continua vindo das custom properties; a duração e a curva (emphasized decelerate do M3) passam a viver no CSS. O hook fica bem mais simples: sem WAAPI, sem ref de animação, cleanup direto no transition.finished.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
O que e por quê
No celular, alternar o tema piscava o novo tema em tela cheia por 1-2 frames antes do círculo (reveal) começar — o que parecia o reveal "bugado". Diagnóstico a partir de uma gravação de tela, extraída a 60fps: a sequência real era
claro → 2 frames PRETOS de tela cheia → claro → círculo cresce.Causa raiz
A animação do reveal era criada com
root.animate(...)dentro detransition.ready.then()— um callback agendado. No desktop ele resolve em menos de um frame; no Chrome do celular (mais lento) demora 1-2 frames, e nesse intervalo o snapshot::view-transition-new(root)é exibido sem oclip-path(tela cheia). Por isso só quebrava no mobile.Correção
Mover o reveal do WAAPI agendado para uma animação CSS (
@keyframes theme-revealem::view-transition-new(root)): ela já está ativa no primeiro frame em que o pseudo-elemento nasce — sem gap, sem flash.--theme-reveal-*.refde animação; cleanup direto notransition.finished.Como verificar
theme-transition-css.test.ts: garante que o reveal é um@keyframesCSS partindo do raio 0 (não um WAAPI agendado).review-feedback-source.test.ts: garantefill-mode: both(o círculo final fica cheio até o snapshot ser removido).Gates locais verdes: lint, tsc, 310 testes unit, react-doctor (changed) sem issues, build.