interactive examples: line numbers and code overlaps about bob HOT 14 CLOSED

What information was incorrect, unhelpful, or incomplete?

the demo is altered/bug

What did you expect to see?

a structured explanation

Could you explain in a bit more detail what the problem is? I don't know what "the demo is altered/bug" means.

from bob.

from bob.

Hi @cjarmada

Perhaps you could put a screenshot highlighting the bit of the text that concerns you?
At the moment it is impossible to fix this because it isn't clear where you are seeing this mixing, which means we have no chance of working out why you think it is a problem.

from bob.

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!

from bob.

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

from bob.

from bob.

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

from bob.

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

from bob.

• 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?

from bob.

Duplicate of #742.

from bob.

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:

from bob.

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:

• codemirror/codemirror5#5876
• codemirror/codemirror5#6210

from bob.

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

from bob.

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

from bob.