Bugzilla

(In reply to Daniel Holbert [:dholbert] from comment #8) 
> When I tested and saw not-bad-results in comment 6, I was logged in to GitHub -- and this bug seems not-as-bad when you're logged in (because the site is presumably completely different). 

One example of the substantial difference here: the code viewer uses a `table` in the slow/janky logged-out view, vs. a flexbox-based layout in the just-fine logged-in view.  Here's the markup for the code viewer, just showing up through the first line of GitHub's "Code viewer" (with the line-number/code `1  {`), in both designs:

Logged out table-table-based design (janky):
```html
<table data-hpc="" class="highlight tab-size js-file-line-container js-code-nav-container js-tagsearch-file" data-tab-size="8" data-paste-markdown-skip="" data-tagsearch-lang="JSON" data-tagsearch-path="cldr-json/cldr-dates-full/main/en/timeZoneNames.json">
  <tbody>
    <tr>
      <td id="L1" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="1"></td>
      <td id="LC1" class="blob-code blob-code-inner js-file-line">{</td>
    </tr>
```

Logged in flex-based design (not janky):
```html
<div class="Box-sc-1gh2r6s-0 bjcubc react-code-file-contents" data-tab-size="8" data-paste-markdown-skip="true" style="height: 47200px;" data-hpc="true">
  <div class="react-line-numbers" style="height: 47200px;">
    <div data-line-number="1" class="react-line-number react-code-text" style="padding-right: 16px;">1</div>
    [...all the other line numbers here...]
  </div>
  <div class="react-code-lines" style="height: 47200px;">
    <div data-key="0" class="react-code-text react-code-line-contents">
      <div id="LC1" class="react-file-line html-div" data-testid="code-cell" data-line-number="1" style="position: relative;">{</div>
    </div>
```
(Here, `.react-line-numbers` and `.react-code-lines` are each vertical flex container with all of the numbers/lines.)

So: the table-flavored layout here is the problematic one.  (I haven't analyzed to the point of knowing why or if the badness is related to tables at all, or if it's just the codepath that GitHub uses with that particular design vs. the other one.)

(In reply to Daniel Holbert [:dholbert] from comment #8) 
> When I tested and saw not-bad-results in comment 6, I was logged in to GitHub -- and this bug seems not-as-bad when you're logged in (because the site is presumably completely different). 

One example of the substantial difference here: the code viewer uses a `table` in the slow/janky logged-out view, vs. a flexbox-based layout in the just-fine logged-in view.  Here's the markup for the code viewer, just showing up through the first line of GitHub's "Code viewer" (with the line-number/code `1  {`), in both designs:

Logged out table-table-based design (janky):
```html
<table data-hpc="" class="highlight tab-size js-file-line-container js-code-nav-container js-tagsearch-file" data-tab-size="8" data-paste-markdown-skip="" data-tagsearch-lang="JSON" data-tagsearch-path="cldr-json/cldr-dates-full/main/en/timeZoneNames.json">
  <tbody>
    <tr>
      <td id="L1" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="1"></td>
      <td id="LC1" class="blob-code blob-code-inner js-file-line">{</td>
    </tr>
```

Logged in flex-based design (not janky):
```html
<div class="Box-sc-1gh2r6s-0 bjcubc react-code-file-contents" data-tab-size="8" data-paste-markdown-skip="true" style="height: 47200px;" data-hpc="true">
  <div class="react-line-numbers" style="height: 47200px;">
    <div data-line-number="1" class="react-line-number react-code-text" style="padding-right: 16px;">1</div>
    [...all the other line numbers here...]
  </div>
  <div class="react-code-lines" style="height: 47200px;">
    <div data-key="0" class="react-code-text react-code-line-contents">
      <div id="LC1" class="react-file-line html-div" [...]>{</div>
    </div>
```
(Here, `.react-line-numbers` and `.react-code-lines` are each vertical flex container with all of the numbers/lines.)

So: the table-flavored layout here is the problematic one.  (I haven't analyzed to the point of knowing why or if the badness is related to tables at all, or if it's just the codepath that GitHub uses with that particular design vs. the other one.)