[Bug report] Code snippet alignment issue

[quadratz]

Description

I noticed that when I was browsing the vuepress documentation, the code snippets had some rendering issues. The text seemed to be slightly shifted down, so the line numbers and text were not on the same line.

Reproduction

Visit https://v2.vuepress.vuejs.org/reference/plugin/docsearch.html#get-search-index

[Mister-Hope]

Can not reproduce, are u using safari?

[github-actions]

Hello @CikiMomogi. Please provide a minimal reproduction using a GitHub repository or v2.vuepress.vuejs.org/new. Issues marked with need reproduction will be closed if they have no activity within 7 days.

[Mister-Hope]

Your browser version and platform info is needed before further invistigation.

[quadratz]

I was using Firefox 108.0.1 and Brave 1.46.144 (chromium 108.0.5359) on a Linux machine (endeavouros), and the issue was still present even after I cleared the data and cache. I'll try testing them on a Windows machine and let you know the results.

[Mister-Hope]

A known issue is that safari only support interger pixel value of font size for <pre> blocks, even if you set line-height: 20.9999px, safari will still render 20px. So we made a fix months ago by setting line-height to 22px instead of the calculated 22.4px.

I am not sure other browers's behavior with <pre> and <code> blocks. All these "special behaviors" are not mentioned in W3C spec, so should be treated as browser rendering issues.

At lease Chrome is working well all the time on Windows and Android.

[Mister-Hope]

An earlier discussion could be found at #901

[quadratz]

You are correct. It does not happen on Windows. I just tested them using Firefox 108.0.1 and the code was rendered correctly. Apparently, the issue only occurs on my Linux machine. You may close this issue if you wish, or If there is anything else I can do to assist, please let me know.

[digital-codes]

Looks fine in my Linux machine, Firefox 108 and Chromium 107. Also looks OK with Safari on my stone-age Ipad Mini (iOS 9.3)

[Mister-Hope]

You are correct. It does not happen on Windows. I just tested them using Firefox 108.0.1 and the code was rendered correctly. Apparently, the issue only occurs on my Linux machine. You may close this issue if you wish, or If there is anything else I can do to assist, please let me know.

Actually, I don't know what to do either, it's the brower which as render issues or weird render behavior which is not mentioned (or is obeying) W3C standard. So I have no idea how to make work around. As you can see in the other issue which I resolved, safari's issue is werid enough.

TBH, I f**king hate these kind of burdens caused by browers......😅 These should be considered as outside bugs.