interactive examples: line numbers and code overlaps

[cjarmada]

Summary

Sometimes the line numbers of interactive examples overlap with the code.

Details

See this comment.

See also

• Web page code examples from prism are broken on last production build kuma#6310
• Line numbers overlap the code #742
• HTML examples: sometimes line counter collapses #977
• Bug: Line number in code snippets doesn't stay on the left side when scrolling #978
• Code line numbers overlap with line content. #980

Original description by @cjarmada

MDN URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

What specific section or headline is this issue about?

Array.prototype.concat()

What information was incorrect, unhelpful, or incomplete?

the demo is altered/bug

What did you expect to see?

a structured explanation

Do you have any supporting links, references, or citations?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/javascript/reference/global_objects/array/concat
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/javascript/reference/global_objects/array/concat/index.md
• Last commit: mdn/content@80ac011
• Document last modified: 2022-02-04T02:28:12.000Z

[wbamberg]

I can't find the report now, but I wonder if this is an intermittent issue we see in interactive examples where the line numbers overlap the first couple of characters of the code. It turns out I can reproduce this in Chrome if I:

• open a page, like say https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
• from the sidebar, "open in new tab" a new page, like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin, so it opens in the background
• switch to that new tab

@cjarmada , is this what you are seeing?

This has been reported before but was closed because noone could figure out what was causing it.

But if this is your problem I think we should transfer this issue to Yari, so we can have another go at fixing it!

[wbamberg]

No wonder I couldn't find it, it was from Kuma days: mdn/kuma#6310.

[cjarmada]

Yes, this was it.

…

On Tue, May 3, 2022 at 7:52 AM wbamberg ***@***.***> wrote: I can't find the report now, but I wonder if this is an intermittent issue we see in interactive examples where the line numbers overlap the first couple of characters of the code. It turns out I can reproduce this in Chrome if I: - open a page, like say https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice - from the sidebar, "open in new tab" a new page, like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin, so it opens in the background - switch to that new tab [image: Screen Shot 2022-05-02 at 4 48 14 PM] <https://user-images.githubusercontent.com/432915/166343677-1d9b1285-e6f8-419c-b672-5e4c9ccf5279.png> @cjarmada <https://github.com/cjarmada> , is this what you are seeing? This has been reported before but was closed because noone could figure out what was causing it. — Reply to this email directly, view it on GitHub <mdn/yari#6152>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXGP6NKI5FWMLHVBIOIORTDVIBTCDANCNFSM5U3FMIMA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[wbamberg]

Great! Since this is a platform issue, I'm transferring it to mdn/yari.

[cjarmada]

And if I refresh the page, it's just fixed.

[caugner]

• open a page, like say https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

• from the sidebar, "open in new tab" a new page, like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin, so it opens in the background

• switch to that new tab

Unfortunately I cannot reproduce the issue following those steps with Chrome 101 on Mac OS.

@cjarmada @wbamberg

• What Chrome version and operating system are you using?
• Could you please provide a screen recording (video) starting with a blank page (about:blank) so that we can see exactly what steps lead to the issue?

[caugner]

Duplicate of #742.

[wbamberg]

I'm running macOS Big Sur, and see the problem with Chrome 100 (but since this has been an issue for years, it's unlikely to be a problem with a specific Chrome version).

Screen recording:

[caugner]

Thanks @wbamberg! I was able to reproduce it now, but only after disabling MDN Offline.

It looks like a CodeMirror bug, which doesn't set the width of the div.CodeMirror-linenumber:

And there are indeed two corresponding upstream bugs:

• The line number display issue in the light box codemirror/codemirror5#5876
• Line Number is not visible properly codemirror/codemirror5#6210

[schockocraft]

I am using this script in Tampermonkey now, to fix the issue on my end, and thought it might be worth suggesting that you'll implement the same workaround for everyone until the upstream issues have been resolved:

gist.github.com/schockocraft/mdn-fix-js-code-examples.js

If you don't wanna do this, i hope anyone who is annoyed by it will find the link here to use it for themselfes :D

[NiedziolkaMichal]

This issue has been fixed, after updating CodeMirror to version 6. Thank you for reporting it.