用户卡在手机上打不开

贡献 错误
1

更新到 2.6.0.beta6 (3e1b94c227) 后，用户卡片在移动端无法打开。我在 meta 环境中进行了测试，没有问题。也许是因为我们的 Discourse 是 RTL（从右到左）布局，导致了这个问题。

桌面端没有问题，但在手机上，点击用户头像不会打开用户卡片，需要再次点击才会进入个人主页。

没有错误日志……

我使用没有任何组件的默认模板进行了测试。

我们使用的插件如下：

3 个赞
2

我在 RTL 模式下看不到以下类：

该文件是否未被编译？因为我们是通过 Web 界面进行的更新。

4

不太可能，但并非没有可能。你能通过控制台重新构建吗？

1 个赞
5

没问题，我们原计划明天进行。从昨天起，我们已临时在主题中添加了相关代码以解决该问题。

6

我可以复现这个问题。这看起来是 R2 中的一个 bug。

如果向编译器传递 :rtl 选项，它会通过 R2 处理 CSS，并执行神奇的 RTL 转换。

这通常运行良好，但由于某种原因，我们似乎遇到了一种边缘情况，导致它返回混乱的 CSS。我们使用一种模式为移动导航菜单创建淡入淡出效果，如下所示。

这并不是唯一使用该模式的地方；这只是一个示例。

看起来这种模式超出了 R2 的处理能力。我们调用了一个 RGBA 函数并将 CSS 变量传递给它，然后我们还添加了一个停止点。

当通过 R2 处理时，它返回类似这样的内容：

jumbled CSS
jumbled CSS1101×786 278 KB

如果关闭该功能（即使在 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 个赞
7

哇，您的描述非常详尽且实用，这个 bug 也真是奇特！

我们之前也遇到过您上面提到的一些 bug，但当时尝试通过覆盖 CSS 来隐藏它们。

非常感谢您如此耐心、细致地解决了这个问题，也感谢您提供了如此完整的说明 :pray: :slightly_smiling_face:

4 个赞