User card will not open on the mobile

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

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

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

correct css
correct css1104×69 12 KB

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.

https://github.com/discourse/discourse/pull/11360

Thanks for reporting the issue @nildarar :+1:

7 Likes