Spoiler blur tem desempenho ruim no Firefox e Android

Contribuir Funcionalidade
1

No fórum Discourse do intfiction.org, falamos muito sobre jogos de aventura com quebra-cabeças, então a tag [spoiler] é uma grande ajuda. Em este tópico, há toneladas de tags de spoiler separadas, uma para cada dica.

Esta página funciona razoavelmente bem no Google Chrome, mas tem desempenho ruim no Firefox e também não funciona bem em celulares Android lentos. É extremamente lento no Firefox no Android. (Role um pouco para baixo para ver o que quero dizer.)

Isso provavelmente é culpa do Firefox.

No entanto, acho que o plugin de spoiler deveria definir o texto do spoiler para usar color: black; background: black em vez de filter: blur(0.5em) em navegadores/plataformas que lidam com o desfoque de forma lenta ou inadequada (Firefox, Android).

3 curtidas
2

Tem como a gente ajustar esse CSS nós mesmos?

1 curtida
3

Com CSS, isso deve obter o que você descreveu com um fundo que combina com o texto. Adicionar isso a um componente de tema deve substituir o CSS do plugin… embora não funcione para imagens em spoilers.

Isso faria a alteração em todos os navegadores; você precisaria detectar o user-agent em JS se quisesse mirar apenas no Firefox.

.spoiler-blurred {
  filter: none;
  background: var(--primary); 
  color:  var(--primary);
}

.discourse-no-touch .spoiler-blurred:hover {
  filter: none;
  /* você poderia adicionar um efeito de hover diferente aqui */
}

.spoiled {
  background: transparent; 
}

É uma pena ouvir sobre o mau desempenho do Firefox. Não damos suporte oficial ao Firefox no Android, mas parece que isso afeta o Firefox em todos os lugares. Talvez devêssemos considerar voltar ao nosso método antigo de usar um text-shadow para criar o azul em vez de filter…

1 curtida
4

Parece que não afeta mais o meu Firefox.

image
image1283×915 40.5 KB

Vou fazer testes de referência no Fenix/Fennec também.

4 curtidas
5

E quanto a uma atualização para o mod que adicione uma caixa de seleção de estilo para ‘desfocar spoilers/redigir spoilers’? Redigir spoilers cobriria o texto de spoiler com uma barra preta, o que poderia poupar o navegador da sobrecarga de renderizar o texto com um desfoque.

Isso pelo menos tornaria possível criar um tema específico para ‘mobile’ que pudesse aproveitar todos os mods mais rápidos e específicos para dispositivos móveis.

1 curtida
6

Definitivamente também corrigido na versão mais recente do Firefox para Android!

Firefox Fennec Chrome Firefox Fenix
Screenshot_20200810-220614
Screenshot_20200810-2206141080×2160 44.6 KB
Screenshot_20200810-220643
Screenshot_20200810-2206431080×2160 50.3 KB
Screenshot_20200810-220652
Screenshot_20200810-2206521080×2160 47.8 KB
52k 10k 10k

Portanto, diria que https://arewefenixyet.com/ indica que isso foi corrigido em alguns países, com outras regiões sendo atualizadas em apenas algumas semanas.

5 curtidas
7

Para esclarecer, reproduzo o bug de desfoque lento 925025 nessa página de teste no Firefox 79.0 para macOS Catalina 10.15.5 em um MacBook Pro 16" de 2019.

O Firefox leva 96.141 ms para uma execução de desfoque; o Chrome leva 9.998 ms. Talvez isso já tenha sido corrigido na versão nightly?

EDIT: Sim, foi. Na versão 81.0a1 (10/08/2020) (64 bits), o benchmark de anexo leva 10.006 ms e a página do Discourse cheia de spoilers renderiza de forma bastante suave.

Parece, então, que talvez não devamos fazer nada por enquanto e apenas aguardar que a Mozilla implemente suas correções.

Obrigado!

4 curtidas
8

Acredito que a correção real seja o WebRender, que atualmente está sendo ativado como padrão conforme http://arewewebrenderyet.com/.

Ele já está habilitado onde a maioria dos usuários está (Windows) e está chegando a outros lugares! Também é a primeira coisa que ativamos em um novo PC para nós da equipe :stuck_out_tongue:.

5 curtidas