Карточка пользователя не открывается на мобильном

Внести вклад Ошибка
1

После обновления до версии 2.6.0.beta6 (3e1b94c227) карточка пользователя не открывается на мобильных устройствах. Я протестировал на Meta, и там проблем не возникло. Возможно, эта проблема связана с тем, что наш Discourse настроен для правостороннего написания (RTL).

На компьютере проблем нет, но на мобильном телефоне при нажатии на изображение пользователя карточка не открывается; однако при повторном нажатии происходит переход на страницу профиля.

Ошибок в логах нет…

Я проводил тестирование с шаблоном по умолчанию без каких-либо компонентов.

Мы используем следующие плагины:

3 лайка
2

Я не вижу следующие классы в RTL:

Возможно, этот файл не был скомпилирован? Мы выполняли обновление через веб-интерфейс.

4

Маловероятно, но возможно. Можете ли вы пересобрать через консоль?

1 лайк
5

Конечно, мы планировали сделать это завтра. Но уже вчера мы временно добавили соответствующий код в тему, чтобы решить проблему.

6

Мне удалось воспроизвести эту проблему. Похоже, это ошибка в R2.

Если компилятору передан опция :rtl, он прогоняет CSS через R2, и тот выполняет магические преобразования для RTL.

Это работает отлично, но по какой-то причине мы, кажется, попадаем в пограничный случай, когда R2 возвращает искажённый CSS. Мы используем паттерн для создания эффекта плавного появления (fade) для мобильных навигационных меню, и он выглядит так.

Это не единственное место, где мы его используем; это просто пример.

Кажется, этот паттерн слишком сложен для R2. Мы вызываем функцию RGBA и передаём ей CSS-переменную, а также добавляем стоп-точки (stops).

Когда этот код проходит через R2, он возвращает что-то вроде этого.

jumbled CSS
jumbled CSS1101×786 278 KB

Когда эта опция отключена (даже в локальной сборке с RTL), мы получаем следующее:

correct css

Искажённый CSS сбивает компилятор с толку, и он сворачивает любой CSS, идущий после этого правила, в бесполезный код, который никогда не применяется.

Таким образом, несколько таблиц стилей после этой никогда не загружаются на мобильных устройствах в режиме RTL. Одна из них — таблица стилей карточки пользователя.

Я попробовал упростить этот паттерн, убрав стоп-точки, и, кажется, это сработало. То есть мы переходим от этого:

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

к этому:

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

Это не вызовет никаких визуальных изменений, так как эти стоп-точки являются значениями по умолчанию, но проблема будет решена.

Я отправил PR, чтобы обновить этот паттерн во всех местах его использования здесь.

Спасибо за сообщение об этой проблеме @nildarar :+1:

7 лайков
7

Вау, ваше описание было очень полным и полезным, а баг оказался необычным!

Мы уже сталкивались с некоторыми из упомянутых вами багов, но пытались скрыть их, переопределяя CSS.

Спасибо, что так терпеливо и внимательно решили эту проблему, и спасибо за подробное объяснение, которое вы написали :pray: :slightly_smiling_face:

4 лайка