[BUG] On iOS mobile phone, the code block font size is not the same

[DejavuMoe]

Describe the bug

• Device/Os: iPhone 13/iOS 15.3.1
• Type: Mobile
• Browser and version: Safari & Google Chrome v99.0.4844.59
• Hugo Version: 0.93.3
• Theme Version: 80928d9f2327809b7ecccf36930e4b726a7d10b2

Steps to reproduce the behavior:

1. Open Safari or Chrome browser
2. Visit my website at www.dejavu.moe (using the awesome PaperMod, thanks for your work)
3. Open any post with a long block of code ( example 1, example 2 )
4. find that the font size of the code is not consistent, some are very large, some are small

Expected behavior:

Access to the code block font size on mobile devices (cell phones) browsers remains essentially the same size

Screenshots

Additional context

I'm not sure if it's the same problem as #695

The issue does not repeat on another iPad Pro 11 with iPadOS 15.3.1

My Hugo config.yml:

assets:
    disableHLJS: true

markup:
    highlight:
        #anchorLineNos: true
        codeFences: true 
        guessSyntax: false 
        lineNos: false 
        noClasses: false 
        style: dracula

code highlighting css:

[DejavuMoe]

I don't have a macbook so it's hard for me to connect my phone via USB cable for web debugging, but I found a project remotedebug-ios-webkit-adapter that should allow remote debugging of web pages on mobile phones in Windows OS

Temporary workaround :

Once I stopped using Hugo's syntax highlighter Chroma:

params:
    assets:
        disableHLJS: true

and fallback code block highlighted as default configuration:

markup:
   # highlight:
   # anchorLineNos: true
   # codeFences: true
   # guessSyntax: true
   # lineNos: true
   # noClasses: false
   # style: monokai

Screenshots:

[adityatelange]

Excellent

[adityatelange]

@DejavuMoe Can we close this if this issue is now sorted?

[DejavuMoe]

@DejavuMoe Can we close this if this issue is now sorted?

There is no better solution for the time being, so let's close it for the time being🤔

Thank you for your work.

[adityatelange]

@DejavuMoe you can head over to Hugo forums and let them know about this, imo this isn't theme side bug and totally depends on chroma syntax highlighter

[DejavuMoe]

@DejavuMoe you can head over to Hugo forums and let them know about this, imo this isn't theme side bug and totally depends on chroma syntax highlighter

OK,thanks

[tabletcorry]

Also seeing this bug. The workaround that I found was to remove a code type from my code blocks. Disabling HLJS had no effect at all.

Specifically, the use of HCL code highlighting appears to break the code size. Perhaps an interaction between HLJS (which does not support HCL) and Chroma (which does)?

Once the HCL highlighting is removed, the JS highlighting switches from having the same bug, to being rendered correctly.

[bglw]

Hi all,

This bug can be traced back to this iOS issue with flex and font sizing: https://stackoverflow.com/questions/38346494/why-is-flex-affecting-font-size-on-ios

Adding the following styles to your site will fix this bug and allow to you use the default Chroma highlighting in Hugo:

/* Fixes iOS font sizing anomaly */
code {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}