C++ syntax highlighting on iOS html

[jonathanreeves]

I have a document that I render into a few different formats, including html. The html output looks great on most platforms, but on iOS, all syntax-highlighted C++ is badly mangled. Screenshot attached to show what I mean.

Relevant info:

jon@ubuntu:pandoc-debug$ pandoc --version
pandoc 2.13
Compiled with pandoc-types 1.22, texmath 0.12.2, skylighting 0.10.5,
citeproc 0.3.0.9, ipynb 0.1.0.1
User data directory: /home/jon/.local/share/pandoc
Copyright (C) 2006-2021 John MacFarlane. Web:  https://pandoc.org
This is free software; see the source for copying conditions. There is no
warranty, not even for merchantability or fitness for a particular purpose.

Minimal test case:

UserGuide.md

Rendered with the following:

pandoc UserGuide.md -s -o UserGuide.html

I tested with both Safari and Chrome on an iPhone running iOS 14.4.2. Same behavior in both browsers, so this seems to be a platform-wide thing. Since it's only iOS, I'm guessing the most obvious answer is that this is a problem in Apple's html rendering in iOS. If that's true, it would at least be helpful to narrow down what's going wrong to put together a better bug report for them.

[mb21]

I can confirm this on iOS 14.4.2 and 14.5 as well (no, -M document-css=false doesn't help).
Furthermore, everything looks fine on desktop Safari 14.0.3 and 14.1.

[mb21]

Interestingly, removing the following CSS rule fixes it:

pre > code.sourceCode > span {
  display: inline-block;
}

source of that seems to be this line, which has been there for more than two years...

[jonathanreeves]

Thanks! I can confirm that this fixes the mangling, both on the minimal test case and in my original full doc. Of course not surprisingly it also causes the lines to wrap instead of allowing you to scroll left and right. This is probably still strictly better, but it would be nice to be able to maintain the scrolling behavior on mobile devices and avoid wrapping. At the very least this helps a lot with figuring out where mobile Safari is losing its mind.

[jgm]

I think we want the non-wrapping behavior to be the default, as wrapping can lead to problems in code (leading people to think the code contains a line break). So, it looks like an iOS bug, and maybe this can be closed?

[mb21]

Definitely looks like an iOS bug. Unfortunately for us, that has quite high usage-share. So if they don't fix it soon, and it happens often (not just with this specific piece of code highlighted in cpp), then we may have to find a work-around... like in the good old Internet Explorer days 🙈

[jonathanreeves]

For what it's worth, I submitted a bug report to Apple, but that's always kind of a black box. I have the test cases hosted here:
https://mimicc.dev/ios-good.html
https://mimicc.dev/ios-bad.html

As someone who briefly worked at Apple, the best way to get these things fixed is always to talk to someone who works on the team in question. Unfortunately I don't know anyone on the mobile Safari team, but maybe someone else here does?

Also not sure if this is helpful, but the original context of the document where this came up is here (already corrected to remove the inline-block):
https://mimicc.dev/user-guide/

Really appreciate the work you guys do, having a tool like this has been invaluable for writing and distributing documentation.

[mb21]

As someone who briefly worked at Apple, the best way to get these things fixed is always to talk to someone who works on the team in question. Unfortunately I don't know anyone on the mobile Safari team, but maybe someone else here does?

Nope, I only follow @jensimmons on twitter 😅
But do you have a radar nr?

[jgm]

@mb21 can you think of a workaround that would make sense, short of just setting the default to wrap (which I don't want to do)? Is there a way to set the default to wrap on mobile devices, or on IOS, for example?

[jonathanreeves]

Nope, I only follow @jensimmons on twitter 😅
But do you have a radar nr?

Just the one assigned through feedback assistant: 9091417

[jgm]

Maybe I'll leave this open in case someone can find a good workaround.
It may be some time before the bug is fixed, after all.

[mb21]

I had a quick look, and couldn't find an easy fix. Probably could get something working with either css grid or flexbox, e.g:

pre > code.sourceCode {
  display: grid;
}

but that wouldn't work for older browsers and really would be a rewrite of all that... so let's hold off doing that for a bit, maybe Safari will have it fixed in the next release...

[AlbertLei]

Can confirm this bug still exists on iOS 16.1.1 when using pandoc 3.1.4

[jgm]

Since this bug in iOS is obviously not a priority for them, maybe we should capitulate and remove

pre > code.sourceCode > span {
  display: inline-block;
}

or make it conditional so that it doesn't get activated for mobile devices. Someone who really knows CSS may have other ideas...

[jgm]

In my tests, removing the display: inline-block has no bad effects; lines still scroll rather than wrapping...so I will do this.

[AlbertLei]

Can confirm removing display: inline-block "solves" this iOS bug without introducing other noticeable changes.
Thanks!