Code blocks are rendered with inconsistent font sizes on mobile

[wilkinsona]

The font size used here matches the rest of the text

The font size used here is larger for some reason

Expanding the imports results in a mixture of font sizes in the same block

[philwebb]

Having a hard time replicating this, it looks to be specific to Apple devices (and I don't have any). I did find one font issue that I've pushed a fix for but I'm not convinced it'll solve this one.

[wilkinsona]

It goes wrong in a different way on macOS Safari in responsive design mode.

There are two scroll bars, one for the imports and one for the main code

I'll have a bit of a play with connecting web inspector to my phone and see if I can spot anything.

[wilkinsona]

I thought it was something to do with the <pre> block not inheriting the font-size from .doc pre, but <pre> blocks with both the correct font size and the wrong font size don't show any styles inherited from .doc pre. I'm not sure how useful remote web inspector is as it doesn't seem to be showing the right data.

[wilkinsona]

Unfortunately, the latest changes don't seem to have helped. I wondered if the problem was specific to Java code, i.e. blocks with code folding, but that's not the case.

Here are two Java code blocks, one with a large font size and one with the expected size

[philwebb]

Interestingly the bottom block is Java but doesn't have folding. Perhaps the folding is the problem

[wilkinsona]

Ooh, I'd missed that it didn't have folding. Maybe that is the problem after all. I'll check some more blocks and see if the pattern holds.

[wilkinsona]

Bingo. It doesn't seem to like the nested <span> elements. That's maybe fair enough as I think <span> is supposed to be an inline element and they're blocks here. I tried changing the outer <span class="fold-block…"> elements to <div>s in web inspector and that seems to fix the problem.

[philwebb]

I've replicated using the simulator from xcode. The issue is the float:right on the block which makes Safari think it can zoom the text. See https://stackoverflow.com/questions/20924039/wrong-font-size-when-using-float-right-in-css-on-mobile-safari