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

**URL:** <https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268>\
**Category:** Bug\
**Created:** [25.Ноябрь.2020 09:12:20 UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268 "2020-11-25T09:12:20Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [26.Ноябрь.2020 11:32:35 UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/6 "2020-11-26T11:32:35Z")

</div>

Мне удалось воспроизвести эту проблему. Похоже, это ошибка в [R2](https://github.com/ded/R2).

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

> <https://github.com/discourse/discourse/blob/5763309953c1c40bc2ecb05f3e73d502f1ea2c61/lib/stylesheet/compiler.rb#L50-L53>

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

> <https://github.com/discourse/discourse/blob/7539c2ed7fe7ae991c823bc958be12fa052eb830/app/assets/stylesheets/mobile/edit-category.scss#L13-L17>

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

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

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

 ![jumbled CSS](https://global.discourse-cdn.com/meta/original/3X/c/5/c5255c3a4e454631ac7ca80752d0559101c676b4.png)

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

![correct css](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/3X/3/f/3fb85f6af2d05158532b22f85c38a620c0a28232_2_517x32.png)

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

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

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

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

```

к этому:

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

```

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

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

> <https://github.com/discourse/discourse/pull/11360>
>
> This PR only makes CSS changes that have no visual impact, but they fix an issue… in the compiler that causes some stylesheets not to load on mobile RTL.
> 
> Full context here
> 
> https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/6?u=johani

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

---

_[View the full topic](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268)._