La tarjeta de usuario no se abre en el móvil

Después de actualizar a 2.6.0.beta6 (3e1b94c227), la tarjeta de usuario no se abre en el móvil. Lo probé en meta y no hubo ningún problema. Tal vez porque nuestro Discourse es RTL, se ha producido este problema.

No tenemos ningún problema en el escritorio, pero en el teléfono móvil, al tocar la imagen del usuario no se abre la tarjeta, pero al tocar de nuevo, entramos en el perfil.

No hay ningún registro de error…

Hice la prueba con una plantilla predeterminada sin ningún componente.

Estamos utilizando estos complementos:

3 Me gusta

No puedo ver las siguientes clases en RTL:

¿Es posible que este archivo no se haya compilado? Realizamos la actualización a través de la interfaz web.

Poco probable, pero posible. ¿Puedes reconstruirlo desde la consola?

1 me gusta

Claro, teníamos previsto hacerlo mañana. Desde ayer, hemos añadido temporalmente el código correspondiente al tema para solucionar el problema.

Puedo reproducir este problema. Parece ser un error en R2.

Si se pasa la opción :rtl al compilador, ejecuta el CSS a través de R2, que realiza los cambios mágicos de RTL.

Esto funciona muy bien, pero por alguna razón, parece que estamos encontrando un caso límite donde devuelve CSS desordenado. Utilizamos un patrón para crear un efecto de desvanecimiento en los menús de navegación móviles, que se ve así.

Este no es el único lugar donde lo usamos; es solo un ejemplo.

Parece que este patrón es más de lo que R2 puede manejar. Estamos llamando a una función RGBA y pasando una variable CSS a ella, y luego también añadimos un punto de parada.

Cuando esto se pasa a través de R2, devuelve algo como esto.

Al desactivarlo (incluso en una instancia local RTL), obtenemos esto:

correct css

El CSS desordenado confunde al compilador y hace que comprima cualquier CSS que viene después de esa regla en código inútil que nunca se aplica.

Por lo tanto, hay varias hojas de estilo después de esa que nunca se cargan en móviles con RTL. La hoja de estilo de la tarjeta de usuario es una de ellas.

Intenté reducir la complejidad de ese patrón eliminando los puntos de parada, y parece funcionar. Así que pasamos de esto:

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0) 0%,
  rgba(var(--secondary-rgb), 1) 100%
);

a esto:

background: linear-gradient(
  to right,
  rgba(var(--secondary-rgb), 0),
  rgba(var(--secondary-rgb), 1)
);

Esto no causará ningún cambio visual, ya que esos son los puntos de parada predeterminados de todos modos, y soluciona el problema.

He enviado una PR para actualizar ese patrón en todos los lugares donde lo usamos aquí.

Gracias por reportar el problema @nildarar :+1:

7 Me gusta

¡Vaya, tu descripción fue muy completa y útil, y el error fue bastante extraño!

Hemos visto algunos de los errores que mencionaste anteriormente, pero intentamos ocultarlos sobrescribiendo el CSS.

Gracias por resolver este problema con tanta paciencia y cuidado, y gracias por la explicación completa que escribiste :pray: :slightly_smiling_face:

4 Me gusta