`topic-progress-wrapper` 在 RTL 中的问题

贡献 错误
1

你好，Discourse 团队，

在 RTL 布局中，当浏览到话题页面底部时，topic-progress-wrapper 类会导致页面显得杂乱。请检查此问题。

如果注释掉以下代码中的值，问题即可解决：

@media screen and (min-width: 925px)
.container.posts .topic-navigation {
    grid-area: timeline;
    align-self: start;
    /* position: -webkit-sticky;
       position: sticky; */
    top: 6em;
    margin-right: 1em;
    z-index: 100;
}
2

嗨 @Nildarar，

能否请您提供一张问题截图？

3

截图中未显示。让我进一步说明。要查看该问题，请按以下步骤操作：

  1. 将您的模板设置为 RTL（从右到左）
  2. 进入移动视图
  3. 将屏幕宽度增加到 925px 以上
  4. 滚动到主题末尾
  5. 主题进度模块会从屏幕中消失，并且页面会横向滚动。

我们本可以通过修改 CSS 自行修复此问题，但我认为这可能是一个更深层的 bug，希望通过您的审查能够发现。

1 个赞
4

好的，这是更大问题的一个症状。根本问题在于，当屏幕宽度 ≥ 925px 时，Discourse 应以桌面视图而非移动视图进行渲染。您能告诉我您在哪些设备上看到了这个问题吗？

值得一提的是，移除 position: sticky 似乎能解决这个特定问题，但会破坏主题时间线（向下滚动主题时，时间线不会随之向下移动）。

与此问题 somewhat 无关，但我注意到在 RTL（从右向左）布局中，主题进度条应该位于左侧而非右侧。我已为此提交了一个 PR，链接如下：https://github.com/discourse/discourse/pull/11999。

7 个赞
5

用户向我们报告了此事，我也在开发者工具中看到了该问题。我会咨询我的同事并告知您。

感谢您的修复 :+1:

2 个赞
6

已合并，非常感谢你的报告，希望这能解决问题。

3 个赞