# User card will not open on the mobile

**URL:** https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268
**Category:** Bug
**Created:** [November 25, 2020, 9:12am UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268 "2020-11-25T09:12:20Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [November 25, 2020, 9:12am UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/1 "2020-11-25T09:12:20Z")

</div>

After updating to 2.6.0.beta6 (3e1b94c227), the user card will not open on the mobile. I tested in meta and there was no problem. Maybe because our discourse is RTL, this problem has occurred.

We do not have a problem on the desktop, but on the mobile phone, tapping on the user’s image does not open the card, but by tapping again, we enter the profile.

There is no error log …

I did the test with a default template without any components.

We are using these plugins:

- [discourse](https://github.com/discourse/discourse.git) latest-release +46
- [discourse-adplugin](https://github.com/discourse/discourse-adplugin.git) 4131f84
- [discourse-akismet](https://github.com/discourse/discourse-akismet.git) 11ef295
- [discourse-canned-replies](https://github.com/discourse/discourse-canned-replies.git) 9b124a0
- [discourse-data-explorer](https://github.com/discourse/discourse-data-explorer.git) 694afc6
- [discourse-prometheus](https://github.com/discourse/discourse-prometheus.git) stable +89
- [discourse-push-notifications](https://github.com/discourse/discourse-push-notifications.git) b3e9bf9
- [discourse-sitemap](https://github.com/discourse/discourse-sitemap.git) cd0ed99
- [discourse-solved](https://github.com/discourse/discourse-solved.git) 1252a3d
- [discourse-spoiler-alert](https://github.com/discourse/discourse-spoiler-alert.git) 32fb5ca
- [discourse-telegram-notifications](https://github.com/davidtaylorhq/discourse-telegram-notifications.git) 0596f7c
- [discourse-voting](https://github.com/discourse/discourse-voting.git) 64f9f6f
- [discourse-whos-online](https://github.com/davidtaylorhq/discourse-whos-online.git) f6a5753
- [docker\_manager](https://github.com/discourse/docker_manager.git) 8c432b9
- styleguide

---

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [November 25, 2020, 9:30am UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/2 "2020-11-25T09:30:12Z")

</div>

I can not see the following classes in RTL:

> <https://github.com/discourse/discourse/blob/ac80109705d1f0a696f054912367603106ec6569/app/assets/stylesheets/mobile/components/user-card.scss>

Could this file not be compiled? Because we did the update through the web interface.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 26, 2020, 2:28am UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/4 "2020-11-26T02:28:13Z")

</div>

> [@nildarar](#):
>
> Because we did the update through the web interface.

Unlikely, but possible. Can you rebuild via the console?

---

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [November 26, 2020, 5:04am UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/5 "2020-11-26T05:04:48Z")

</div>

Sure, we planned to do that tomorrow. Since yesterday, we have temporarily added the relevant codes to the theme to solve the problem.

---

<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: [November 26, 2020, 11:32am UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/6 "2020-11-26T11:32:35Z")

</div>

I can reproduce this issue. It looks like a bug in [R2](https://github.com/ded/R2).

If the `:rtl` option is passed to the compiler, it runs the CSS through R2, and it does the magic RTL changes.

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

This works great, but for some reason, we seem to be hitting an edge case where it returns jumbled CSS. We use a pattern for creating a fade effect for mobile nav menus, and it looks like this.

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

This is not the only place where we use it; it’s just an example.

It seems like this pattern is more than R2 can handle. We’re calling an RGBA function and passing a CSS variable to it, and then we also add a stop.

When this is passed through R2, it returns something like this.

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

with it off (even on an RTL local), we get this

![correct css](https://global.discourse-cdn.com/meta/optimized/3X/3/f/3fb85f6af2d05158532b22f85c38a620c0a28232_2_517x32.png)

The jumbled CSS throws the compiler off and causes it to squash any CSS that comes after that rule into useless code that never applies.

So, there’s several stylesheets after that one that never get loaded on mobile RTL. The user card stylesheet is one of them.

I tried to reduce that pattern’s complexity by removing the stops, and it seems to work. So we go from this.

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

```

to this

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

```

This will not cause any visual changes - since those are the default stops anyway - and it fixes the issue.

I sent a PR to update that pattern everywhere we use it here.

> <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

Thanks for reporting the issue @nildarar 👍

---

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [November 26, 2020, 11:46am UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/7 "2020-11-26T11:46:38Z")

</div>

Wow, your description was very complete and useful, and the bug was bizarre!

We’ve seen some of the bugs you mentioned above before, but we tried to hide them by overriding the CSS.

Thank you for solving this problem so patiently and carefully, and thank you for the complete explanation you wrote 🙏 🙂

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [December 3, 2020, 7:39pm UTC](https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/9 "2020-12-03T19:39:48Z")

</div>


