gistfile1.md

TL;DR

Looks like a race condition, but I can't prove it.

Fixed Code

// scroll to current item
if (typeof currentWordId !== "undefined") {
  // Wait until sidebar is fully loaded
  $(window).on( "load", function() {
    document.querySelector("#active").scrollIntoView({
      behavior: "smooth",
      block: "center",
    });
  })
}

Old Code

// scroll to current item
if (typeof currentWordId !== "undefined") {
  document.querySelector("#active").scrollIntoView({
    behavior: "smooth",
    block: "center",
  });
}

Findings

I took a screenshot of the browser when the offending code gets hit.

Firefox

Chromium (Brave specifically)

Hypothesis

Notice anything different? I immediately noticed that the sidebar wasn't fully loaded in Chromium. I believe that's the issue.

Solution

Use $(window).load instead of $(document).ready.

The difference between $(document).ready and $(window).load is that the first waits for the HTML to be loaded, and the second waits for all the text and images and non-lazy HTTP requeststo render. Usually $(document).ready is plenty, but in this case, it seems like having the sidebar not be fully loaded is screwing this up.

$(window).load usually for me feels like a bit of a brute force solution, and I bet there is a more isolated fix, but it works.