Code line numbers overlap with line content. about bob HOT 7 CLOSED

Was able to get repro with 3/5 rate.

1. Open page https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol ,
2. find `Symbol.isConcatSpreadable
3. Select and click "Open link in new tab"
4. Observe

Google Chrome Version 103.0.5060.134 (Official Build) (x86_64)

from bob.

I've also hit it in the past, and there are duplicate issues: mdn/content#13531

This isn't reproduced consistently in my browser—in fact, probably once every 100 visits—and usually works after a refresh. But I have a feeling this has something to do with wrong hydration order. @mdn/core-dev it's probably a pain but could you investigate?

from bob.

Managed to temporarily reproduce it in Chrome but after navigating the site for a while it no longer occurs.

from bob.

Not a consistent repro. Navigation using links inside the page - persists the issue. Full Refresh (F5) of the page - clears the issue.
When issue occurs each line of code rendered as:

// each line of code
<div style="position: relative;">
  <div class="CodeMirror-gutter-wrapper" aria-hidden="true" contenteditable="false" style="left: 0px;">
    <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 1px;">2</div>
  </div>
  <pre class=" CodeMirror-line " role="presentation">
    <span role="presentation" style="padding-right: 0.1px;">
       <span class="cm-comment">// expected output: 23</span>
     </span>
   </pre>
 </div>
 // left section containing line numbers
 <div class="CodeMirror-gutters" style="height: 258px;">
    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 1px;">
    </div>
 </div>

With proper render:

// each line of code
<div style="position: relative;">
   <div class="CodeMirror-gutter-wrapper" aria-hidden="true" contenteditable="false" style="left: -30px;">
      <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div>
   </div>
   <pre class=" CodeMirror-line " role="presentation">
      <span role="presentation" style="padding-right: 0.1px;">
         <span class="cm-comment">// expected output: 23</span>
      </span>
   </pre>
</div>
// left section containing line numbers
<div class="CodeMirror-gutters" style="height: 257px;">
    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;">
    </div>
</div>

Main differences:
left: 0px vs left: -30px
width: 1px vs width: 21px
width: 1px; vs width:29px;

Looks like Code related component has an issue with maintaining showLineNumbers state, and sometimes got into state when numbers are shown but component set all styling as they are hidden.

from bob.

FWIW @NiedziolkaMichal has reported the issue upstream: codemirror/codemirror5#6953

from bob.

@caugner Yes, but issue is with our implementation of code mirror. Version 6 was released quite recently which I think wouldn't have this problem(we use 5.65.8), but its API is significantly different. I could work on upgrading it, but currently I have 6 PRs in BOB waiting for a review, so its likely that I would be wasting my time.

from bob.

Duplicate of #976.

from bob.