I write this post presenting solutions, so others may benefit from my looking into how to solve the problems.
Also, these “problems”, as I call them, doesn’t stem from the page designs of Discourse. They come from the cat-and-mouse-like differences between how different browsers implement the same page design - a history that has accompanied browsers since their creation and brings recurring annoyances all the time as new features are added by W3C. But the point with this topic isn’t to complain about problems, it’s to show how to work around them.
I would like to point out a couple of problems and solutions using various mobile browsers, that it’s good to be aware of. There are also other more exotic and bizarre differences between different browsers, so if there’s something that disturbs you you can always see how other mobile browsers behave: the big four are Safari (on iPhone), Opera, Google chrome, and Firefox, and which one that works best depends on the situation. I’ve tested the latest versions at this time (2024-05-20) except for Safari, which is integrated with iOS. I’ve only tested 15.8.2.
Problem 1
When editing a post, the preview pane is first placed on the side of the edit box, and it looks awful. The edit box is way to narrow to work with while having a decent overview.
Note: this is an issue only in Safari. Opera, Chrome and Firefox doesn’t have this problem: to switch between the edit and preview panes in them, tap the button at bottom right.
Solution: first, request the desktop website and hide the toolbar (this is a common solution in Safari). Then you’ll see a left double angle bracket (⟪) at the right margin, under the edit and preview panes (to the left you should see the create button and the close option). Tap the double bracket, and you’ll get the full edit box, and the double left bracket changes to a double right bracket that takes you back to the side-by-side view: if there’s a way to show the preview pane fullscreen, I haven’t found it.
Problem 2
When scrolling a list with the on-screen keyboard open, especially when you give the list a push and release it to let it scroll to the bottom on its own, the last item in the list is often only partially visible, or not visible at all. And the whole list starts to flicker if you scroll to the bottom, tap-and-hold on the list, swipe up and don’t let go, so you can see, read and select the last item: if the list starts to flicker, you can’t select the last item at all. This is very annoying, and even if the problem goes away if you close the keyboard, that may not be as easy as it sounds, and the problem is exacerbated the higher the on-screen keyboard is (it varies with what keyboard you use and its settings): at some point the last item on the list is completely out of sight.
To check if there’s a problem with the current browser, for example go to the home page, create a new topic and tap the category box and its Search line: that will open the on-screen keyboard. With the keyboard still up, give the list a push and release it to let it scroll to the bottom on its own, and then tap-and-hold, swipe up and don’t let go, and see what happens. Same thing if you tap the tags box and type a search word (just typing an “a” will suffice), and then tap-and-hold, swipe up and don’t let go.
Solution: I’ve only seen this problem in Safari and Opera: Chrome and Firefox both do halt before the last item is fully visible if you give the list a push and release it to let it scroll to the bottom on its own, but they respond to the tap-and-hold, swipe up and don’t let go without flickering, and Firefox is even smart enough to close the on-screen keyboard if it’s up.