Code blocks are rendered with inconsistent font sizes on mobile

spring-io / spring-asciidoctor-backends

A backend for Asciidoctor used to produce Spring styled HTML

Apache License 2.0

79 stars 16 forks source link

Code blocks are rendered with inconsistent font sizes on mobile #9

Closed wilkinsona closed 3 years ago

wilkinsona commented 3 years ago

The font size used here matches the rest of the text

![IMG_6270](https://user-images.githubusercontent.com/914682/110467143-8c46ca80-80ce-11eb-9caf-f51807b4d2fb.PNG)

The font size used here is larger for some reason

![IMG_6269](https://user-images.githubusercontent.com/914682/110467147-8d77f780-80ce-11eb-8e6d-b246d28c82bd.PNG)

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

![IMG_6271](https://user-images.githubusercontent.com/914682/110467386-db8cfb00-80ce-11eb-847a-655d2adb25a2.PNG)

philwebb commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

![IMG_94912EC2A993-1](https://user-images.githubusercontent.com/914682/110666756-854cb480-81c1-11eb-8c1e-e6f439a027be.jpeg)

philwebb commented 3 years ago

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

wilkinsona commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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