When wide tables exist, in the desktop theme there is a horizontal scroll bar that hints the visitor we can scroll left and right. However in the Mobile theme there is no such scroll bar and the wide table view is really not intuitive, with visitors not being aware that the table is wider than their screen width. Could we add a scroll bar for mobile as well?
Discussion about this matter (however regarding only Desktop theme) occurred bere
What do you think @awesomerobot?
This is a good example of where the auto-hidden scrollbars on mobile/touch browsers aren’t great…
Discourse only officially supports Chrome & Safari on mobile, which means we can style our own scrollbar using CSS like ::-webkit-scrollbar (support). Mobile Firefox users would see no change.
I think what I would prefer to do, which would support all mobile browsers, is to add a fade to the right of the table once it gets wider than the content of the post. Then at least there’s a hint to see more even if there’s no explicit scrollbar.
The problem with that is that currently we overflow: hidden anything within .cooked as a bit of a safety so post content can’t break the page layout… so we can’t style overflowed content when there’s no visible overflow.
We might not need to overflow: hidden post content anymore? I’ll take a closer look and see if it’s sane to remove it, and if not I can add a visible scrollbar for webkit on mobile.
If it works but the scroll bar is hidden, that’s good enough for now – I don’t want to turn this into a ton of work. You have a solution @Mr.X_Mr.X
Yes, it’s low priority… but somewhat related to what I was already considering to fix Letters getting cut off to the leftmost in posts
デスクトップでもモバイルでも、フェードのアイデアが本当に気に入っています。その間に何か変化があり、今ならより簡単に実現できるようになりましたか？
@awesomerobot、これは簡単な変更ですか？私はこれを支持します。
再検討すると、フェード効果はおそらくここでは適切ではないでしょう…グラデーション背景を持つコンテナを追加する必要があり、単色以外の背景ではうまく機能しません。サインアップや管理ナビゲーションなど、カスタム背景が適用される可能性が低い他の場所では、同様のフェードヒントを使用しています。
代わりに、必要に応じてスクロールバーを強制的に表示させる方がよいと考えます。私の知る限り、その欠点はカスタムスクロールバーがネイティブ OS のスクロールバーと一致しないことだけです。
テーブルが水平にスクロールすることを全く示さないより、これはより良い妥協点に聞こえます。
あー、また失敗か。iOS 13 がスクロールバーを常に表示する機能を壊してしまったので、私が期待していたようにすべてのブラウザでその案は通用しないようだ。
iOS のスクロールバーを強制的に表示させるための以前の CSS オーバーライドでは -webkit-overflow-scrolling: auto; を使用する必要があったが、iOS 13 ではデフォルトで -webkit-overflow-scrolling: touch; がすべての場所に設定されており、どうやら iOS では -webkit-overflow-scrolling が完全に非推奨になったらしい。
iOS 15 は iOS 16 に向かっており、Discourse の横長のテーブルはモバイルでは以前としてうまくいかないようです。
参考までに、テーブル展開バグに関するこの投稿 の 2 番目のテーブルは、水平スクロールがないためにモバイル (およびデスクトップ) で失敗するテーブルの例です。
