9

On my phone (iOS Safari - not the app) I followed a link to an old SO answer where I used ASCII art to illustrate a point, and was quite in seeing the art disfigured:

Disfigured ASCII art

I put a reminder to fix it on my laptop later. When I got to that, I was even more surprised to find that it looked perfectly fine on the laptop (Mac Chrome):

Normal ASCII art

What I find especially confusing is that this is just text - my intuition tells me that it shouldn't be subject to issues of styling or responsiveness. Specifically, it looks like sets of 4 spaces are being replaced by 2 (non-recursively) when being served to my mobile device.

Is this by design, or a bug? If it is by design, then should this design be reconsidered, or is ASCII art too niche of a case to worry about?

Dawdling: My guess-timation is that it is by design, to improve the readability of code snippets which have a lot of indentation. But even that would break if the code snippet was pasted from an editor which already used 2 spaces for tabs/indentation. Maybe some "smart detection" is required before compressing these spaces, which checks that all lines are indented by multiples of 4 spaces before doing so - and only applies to the beginning of the line.


The plot thickens

Following @Adam Lear's answer, I investigated further, and observed the following behaviours:

  1. I apparently switch SO to desktop mode at some point in the past, and that setting was cached. So what I was seeing, with that bugged display, was in fact with desktop styling/rendering. Landscape mode did not help here because the width didn't actually change (due to it being much wider already, in desktop mode).

  2. I reopened the page in a private session (thus not rendering in desktop mode) to see an image more similar to @Adam Lear's, which looked fine in landscape mode. I can see that the line is wrapping here instead of using a horizontal scroll bar. This is different to the problem I first observed, where spaces were being compressed - spaces are NOT being compressed this time...

  3. I installed the Chrome browser and observed the same phenomenon as in point 2., which is interesting considering @chade_'s comment - Chrome on Android does NOT have this problem.

  4. I tried viewing the site on my laptop while using the inspector to treat it as a small mobile device, where this error didn't occur.

So the behaviour in points 1 and 2 are quite different. In 2, the spaces are working fine, it's just the line that's wrapping when it's not supposed to. However, I still have no idea what's going on with 1.

It's interesting that the behaviour 2 occurs in both Safari and Chrome on iOS, but it works fine for Chrome on Android. Chrome on Mac worked fine, while Safari exhibited the behaviour in point 2.

I'm going to accept @Adam Lear's answer - landscape is the way to go, I'd guess that the problems causing these behaviours are quite "deep" and could be nightmarish to fix.

3
  • 2
    In Chrome on Android (65.0.3325.109) I get vertical and horizontal scrollbars, and the code formatting looks fine.
    – Filnor
    Commented Apr 11, 2018 at 7:04
  • Have updated with some more findings following the comments/answer.
    – Bilal Akil
    Commented Apr 12, 2018 at 3:55
  • After you updated the answer and you stated Chrome on iOS, I think we have a bit of problem here. I don't know the details, but it appears that both Safari and Chrome are quite related, at least how it looks on caniuse.com for iOS.
    – Filnor
    Commented Apr 12, 2018 at 4:48

1 Answer 1

11

Which phone model are you viewing this on?

As far as I recall/know, we don’t do any sort of special processing for mobile views. Styling is different, but nothing on the order of replacing spaces.

Here are the screenshots from my iPhone SE. Portrait mode looks wonky:

portrait mode has screwed up formatting for the code block

but landscape renders fine:

no code formatting issues

which leads me to suspect that mobile Safari is trying to be too clever (wouldn’t be the first time), and it’s not a bug on our end... or our CSS rules prohibit a horizontal scrollbar. ¯\_(ツ)_/¯

Either way, we are currently working on an actual responsive design for SO and the rest of the sites in our network. Code blocks will definitely need to be treated carefully there, so I think our time is best spent on that for now rather than trying to fix this situation as is.

In the meantime, have you tried switching to landscape mode? :)

2
  • "which leads me to suspect that mobile Safari is trying to be too clever" That is pretty likely, as it works fine in Chrome on Android as I mentioned in this comment to the question.
    – Filnor
    Commented Apr 11, 2018 at 7:05
  • Have updated with some more findings following the comments/answer.
    – Bilal Akil
    Commented Apr 12, 2018 at 3:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .