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 - #8 by awesomerobot
데스크톱과 모바일 모두 페이드 효과에 대한 아이디어를 정말 좋아합니다. 그동안 상황이 바뀌어서 지금은 더 쉽게 구현할 수 있게 된 부분이 있을까요?
이건 쉬운 수정인가요 @awesomerobot? 찬성합니다.
다시 생각해 보니, 페이드 효과가 여기서는 좋은 선택이 아닐 것 같습니다… 그라디언트 배경을 가진 컨테이너를 추가해야 하는데, 이는 단색 배경이 아닌 환경에서는 잘 작동하지 않을 것입니다. 우리는 다른 몇몇 장소에서 유사한 페이드 힌트를 사용하고 있지만, 대체로 사용자 정의 배경이 있는 가능성이 낮은 곳(가입 페이지, 관리자 내비게이션)입니다.
필요할 때 스크롤바가 표시되도록 강제하는 것이 더 나은 방법이라고 생각합니다. 제가 아는 한, 이 방식의 유일한 단점은 사용자 정의 스크롤바가 네이티브 OS 스크롤바와 일치하지 않는다는 점입니다.
수평 스크롤이 가능하다는 표시가 전혀 없는 것보다는 훨씬 나은 절충안이라고 생각합니다.
아, 또 실패했군. iOS 13에서 스크롤바를 항상 표시하는 기능이 깨졌어… 그래서 내가 바랐던 것처럼 모든 브라우저에서 그 아이디어가 작동하지 않을 것 같아.
iOS 스크롤바가 표시되도록 강제하기 위한 이전 CSS 오버라이드에는 -webkit-overflow-scrolling: auto;가 필요했지만, iOS 13은 기본적으로 모든 곳에 -webkit-overflow-scrolling: touch;를 설정하고 있으며, iOS에서 -webkit-overflow-scrolling을 완전히 비추천(deprecated)으로 처리한 것으로 보인다.
현재 iOS 15에서 16으로 넘어가는 시점에서, Discourse의 넓은 테이블은 모바일에서 여전히 잘 작동하지 않는 것 같습니다.
참고로, 확장 테이블 버그에 대한 이 게시물의 두 번째 테이블은 가로 스크롤이 없어서 모바일(및 데스크톱)에서 제대로 표시되지 않는 테이블의 예시입니다.
