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? Я поддерживаю его.
При повторном рассмотрении вариант с плавным исчезновением, вероятно, не подойдёт здесь… Это потребовало бы добавления контейнера с градиентным фоном, что плохо сработает на любом фоне, кроме однотонного. Мы используем похожий намёк на плавное исчезновение в некоторых других местах, но это обычно области, где менее вероятно наличие какого-либо пользовательского фона (регистрация, навигация администратора).
Думаю, нам лучше принудительно показывать полосу прокрутки, когда это необходимо. Насколько я знаю, единственный недостаток этого подхода заключается в том, что пользовательская полоса прокрутки не будет соответствовать нативным полосам прокрутки вашей операционной системы.
Звучит как более приемлемый компромисс, чем отсутствие какого-либо указания на горизонтальную прокрутку таблицы.
Ах, снова провал. iOS 13 нарушила возможность всегда показывать полосу прокрутки… так что эта идея, как я надеялся, не сработает для всех браузеров.
Предыдущий CSS-переопределение, заставлявшее полосы прокрутки на iOS появляться, требовало использования -webkit-overflow-scrolling: auto;, но в iOS 13 по умолчанию везде устанавливается -webkit-overflow-scrolling: touch;, и, похоже, они полностью отказались от -webkit-overflow-scrolling в iOS.
Теперь в iOS 15, движущейся к 16, широкие таблицы в Discourse на мобильных устройствах тоже не выглядят лучше.
Кстати, вторая таблица в этом посте об ошибке с кнопкой разворачивания таблицы — пример таблицы, которая не работает на мобильных (и на десктопе) из-за отсутствия горизонтальной прокрутки.
