El desenfoque de spoiler funciona mal en Firefox y Android

En el foro Discourse de intfiction.org, hablamos mucho sobre juegos de aventuras con acertijos, por lo que la etiqueta [spoiler] es de gran ayuda. En este tema hay un montón de etiquetas [spoiler] separadas, una para cada pista.

Esta página funciona más o menos bien en Google Chrome, pero funciona mal en Firefox y tampoco rinde bien en teléfonos Android lentos. En Firefox en Android va a una velocidad ridícula. (Desplázate un poco hacia abajo para ver a qué me refiero.)

Probablemente sea culpa de Firefox.

No obstante, creo que el complemento de spoiler debería establecer el texto del spoiler para que use color: black; background: black en lugar de filter: blur(0.5em) en navegadores/plataformas que manejan el desenfoque de forma lenta o deficiente (Firefox, Android).

3 Me gusta

¿Hay alguna manera de que podamos ajustar este CSS nosotros mismos?

1 me gusta

Con CSS, esto debería lograr lo que describiste: un fondo que coincida con el texto. Al agregar esto a un componente del tema, se debería anular el CSS del plugin… aunque no funcionaría para imágenes dentro de spoilers.

Esto aplicaría el cambio en todos los navegadores; si quisieras dirigirte solo a Firefox, tendrías que detectar el agente de usuario en JS.

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

.discourse-no-touch .spoiler-blurred:hover {
  filter: none;
  /* podrías agregar aquí un efecto hover diferente */
}

.spoiled {
  background: transparent; 
}

Es una lástima escuchar sobre el mal rendimiento de Firefox. No damos soporte oficial a Firefox en Android, pero parece que el problema afecta a Firefox en todas las plataformas. Quizás deberíamos considerar volver a nuestro antiguo método de usar text-shadow para crear el color azul en lugar de filter

1 me gusta

Parece que ya no afecta a mi Firefox.

Lo pondré a prueba también en Fenix/Fennec.

4 Me gusta

¿Qué tal una actualización para el mod que añada una casilla de estilo para “difuminar spoilers/censurar spoilers”? Censurar spoilers cubriría el texto de spoiler con una barra negra, lo que podría ahorrar al navegador la sobrecarga de renderizar el texto con un efecto de desenfoque.

Eso al menos permitiría crear un tema específico para “móvil” que pudiera integrar todos los mods más rápidos y específicos para dispositivos móviles.

1 me gusta

¡Definitivamente también solucionado en la última versión de Firefox para Android!

Así que diría que https://arewefenixyet.com/ significa que esto ya está solucionado en algunos países y que en otros se implementará en solo unas pocas semanas.

5 Me gusta

Para aclarar, reproduzco el error de desenfoque lento 925025 en esa página de prueba con Firefox 79.0 en macOS Catalina 10.15.5, en un MacBook Pro de 16" de 2019.

Firefox tarda 96.141 ms en una ejecución de desenfoque; Chrome tarda 9.998 ms. ¿Quizás esto ya está corregido en la versión nightly?

EDIT: Sí, lo está. En la versión 81.0a1 (2020-08-10) (64 bits), la prueba de referencia del adjunto tarda 10.006 ms y la página de Discourse llena de spoilers se renderiza con bastante fluidez.

Así que parece que quizás no debamos hacer nada por ahora y simplemente esperar a que Mozilla implemente sus correcciones.

¡Gracias!

4 Me gusta

Creo que la solución real es WebRender, que actualmente se está activando como predeterminado según http://arewewebrenderyet.com/.

Ya está habilitado donde está la mayoría de los usuarios (Windows) y pronto estará disponible en otros lugares. Además, es lo primero que activamos en un equipo nuevo en nuestro equipo :stuck_out_tongue:.

5 Me gusta