`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 を変更することで自身で修正できたかもしれませんが、それ以上のバグがある可能性を考慮し、貴社のレビューによって発見されることを期待して報告しました。

「いいね！」 1
4

はい、これはより大きな問題の症状です。根本的な問題は、画面幅が 925px 以上の場合、Discourse がモバイル表示ではなくデスクトップ表示でレンダリングされるべきだということです。どのデバイスでこの問題が発生しているか教えていただけますか？

余談ですが、position: sticky を削除すると一時的にこの問題が解決したように見えるかもしれませんが、トピックのタイムラインが壊れてしまいます（トピックをスクロールしてもタイムラインが追従しなくなります）。

これはこの問題とは直接関係ありませんが、RTL レイアウトではトピックの進行状況バーが右側ではなく左側に表示されるべきだと気づきました。これに関する PR をこちらに送信しました: https://github.com/discourse/discourse/pull/11999。

「いいね！」 7
5

ユーザーからこの件が報告され、私も開発者ツールで確認しました。同僚に確認して、改めてご連絡いたします。

修正をありがとうございます :+1:

「いいね！」 2
6

マージしました。ご報告ありがとうございます。これで問題が解決することを願っています。

「いいね！」 3