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

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

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

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

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

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

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

Когда эта опция отключена (даже в локальной сборке с 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 лайков