User card will not open on the mobile

Contribute Bug
1

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:

3 Likes
2

I can not see the following classes in RTL:

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

4

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

1 Like
5

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

6

I can reproduce this issue. It looks like a bug in R2.

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

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.

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
jumbled CSS1101×786 278 KB

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

correct css

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.

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

to this

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.

Thanks for reporting the issue @nildarar :+1:

7 Likes
7

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 :pray: :slightly_smiling_face:

4 Likes