shiki.style - In the "transformerRenderWhitespace" section, chances are the dots and tabs are at baseline, rather that in the middle line

[webcompat-bot]

URL: https://shiki.style/packages/transformers

Browser / Version: Firefox 126.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
In the "transformerRenderWhitespace" section, chances are the dots and tabs are at baseline, rather that in the middle line.

To pop up F12, or to opt-out the .vp-code .space::before {
content: "·";
} would make it correctly display.

Chrome always renders it correctly.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. Unfortunately having insufficient details about the issue you submitted, we cannot help you with it. Please leave a comment with more details regarding the issue you are facing and steps to reproduce it, or file a new report with specific details and we will gladly investigate this further

Closing this as Incomplete.

[qa_23/2024]

[Master-Hash]

I have made a minimum reproduction.

https://gist.github.com/Master-Hash/841c4565f17bff6ed707ad3f70d3530b

Step:

1. Open the HTML in Firefox, you'll see
   
   Where dots are on baseline.

2. In F12, comment and uncomment CSS here
   
   and the dots are on middle line, which is expected.

3. Delete

  .buggy {
    line-height: 1.75
  }

in HTML, and the dots are correctly placed.

4. Open the original file in Chrome and you'll see
   
   Which is expected.

I believe it is a bug of Firefox, because of the inconsistency: In a larger file, I met a situation where the first line is good but rest are bad OR all lines are bad, and the result is different every time I refresh.

I hope my description is sufficient for you and thanks for looking into it!

[softvision-raul-bucata]

What I would do usually to test this kind of issue, is:

1. Type about:profiles in the url bar.
2. Choose Create a new profile.
3. Call it deleteme or anything you please.
4. Then start it. (this way you will be sure that nothing is interfering, no ghost caching etc.)- make sure account sync is not performed, as the extensions will be imported in the new profile.
5. Test.

Note: You can return to your old profile at any given time by accessing "about:profiles" in the address bar

[inv_23/2024]

[Master-Hash]

Hello, I created a new profile, and noticed the first time I opened the HTML, it looked nice, and after refreshing it always broke.

[softvision-raul-bucata]

@Master-Hash Opening the link does not show the primes line code as in your screenshot:

Can you please submit a screenrec for clarification?

[inv_23/2024]

[Master-Hash]

@Master-Hash Opening the link does not show the primes line code as in your screenshot:打开链接不会显示屏幕截图中的 primes 行代码：

Can you please submit a screenrec for clarification?您能否提交屏幕记录以供澄清？

[inv_23/2024]

download the HTML and open locally.
or https://assets.hash.memorial/buggy.html is the RAW html.

[Master-Hash]

@softvision-raul-bucata is it reproducible?

[Master-Hash]

@Master-Hash Opening the link does not show the primes line code as in your screenshot:

Can you please submit a screenrec for clarification?

[inv_23/2024]

Here's the screen record:

out.mp4

[softvision-raul-bucata]

@Master-Hash So the only difference on my side, is that when checking line-height in console, the dots are misplaced and do not return to their original position. Is that what you are also referring to?

[inv_24/2024]

[Master-Hash]

@softvision-raul-bucata

The problem is that the dots are misplaced at first. If checking line-height is the only difference, I believe you've noticed it.

If you're not clear, can you show some screenshot?

[softvision-raul-bucata]

@Master-Hash It is clear, but for me the dots are placed correctly, only after checking the line-height attribute the dots are misplaced

[inv_24/2024]

[Master-Hash]

@softvision-raul-bucata

It sounds strange, since my mobile phone, my Window and Linux PC all can reproduce it...

Did you notice the first line? I found that there are circumstances where only dots of the 1st line are misplaced, and after checking the line-height attribute all dots of 3 lines are misplaced. Only 4 dots are in the 1st line, which may be hard to notice.

If you're sure it's not reproducible, I'll give up.

[softvision-raul-bucata]

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1904634

[inv_26/2024]