Firefox scrollTop bug

HTML

<button class="sketchy-show-diagrams" onclick="onShowClick()" role="button" title="Show sidebar">
  Show sidebar
</button>
<div class="instructions">
  Repro steps:
  <br>
  <br> 1. Scroll the list of divs in the sidebar to the bottom.
  <br> 2. Press the 'x' button to close the sidebar.
  <br> 3. Click the 'Show sidebar' button.
  <br>
  <br> In Chrome/IE, note that the list of divs in the sidebar is scrolled to the top when the sidebar is opened.
  <br>
  <br> In Firefox, note that the list of divs incorrectly maintains its scroll position. This can be fixed by uncommenting the console log in the corresponding JS code. If scrollTop is referenced before it's set, Firefox behaves correctly.
</div>
<div class="sketchy-diagrams-sidebar" role="region" tabindex="0" aria-label="Diagrams">
  <div class="sketchy-diagrams-sidebar-title">
    <div class="sketchy-diagrams-sidebar-title-heading">Diagrams</div>
    <button onclick="onHideClick()" class="sketchy-diagrams-sidebar-title-close-icon" role="button" tabindex="0" title="Close">
      <div class="docs-icon goog-inline-block ">
        x
      </div>
    </button>
  </div>
  <div class="sketchy-diagrams-sidebar-content">
    <div class="sketchy-diagrams-sidebar-enabled-content" style="">
      <div class="sketchy-diagrams-sidebar-categories" style="">
        <div class="sketchy-diagrams-category-button " aria-label="Show the Hierarchy diagrams." role="button" tabindex="0">1</div>
        <div class="sketchy-diagrams-category-button " aria-label="Show the Timeline diagrams." role="button" tabindex="0">2</div>
        <div class="sketchy-diagrams-category-button " aria-label="Show the Process diagrams." role="button" tabindex="0">3</div>
        <div class="sketchy-diagrams-category-button " aria-label="Show the Relationship diagrams." role="button" tabindex="0">4</div>
        <div class="sketchy-diagrams-category-button " aria-label="Show the Cycle diagrams." role="button" tabindex="0">5</div>
      </div>
   ...

CSS

.sketchy-show-diagrams {
  position: absolute;
  width: 100px;
  height: 50px;
  cursor: pointer;
  background: #bbb;
}

.instructions {
  position: absolute;
  width: 500px;
  height: 200px;
  left: 0;
  top: 100px;
}

.sketchy-diagrams-sidebar {
  background: #eee;
  border-left: 1px solid #d9d9d9;
  outline: none;
  position: absolute;
  right: 0;
  top 0;
  height: 400px;
  width: 300px;
  user-select: none;
}

.sketchy-diagrams-sidebar-content {
  background: #fff;
  height: calc(100% - 37px);
  width: calc(300px - 10px);
}

.sketchy-diagrams-sidebar-categories,
.sketchy-diagrams-sidebar-scroll {
  overflow: auto;
  overflow-x: hidden;
  position: absolute;
  top: 37px;
  bottom: 0px;
  width: 100%;
}

.sketchy-diagrams-sidebar-categories,
.sketchy-diagrams-sidebar .docs-thumbnailcontainer {
  padding-bottom: 16px;
}

.sketchy-diagrams-sidebar .docs-thumbnailcontrol-title {
  margin-top: 9px;
}

.sketchy-diagrams-category-button:focus {
  border: 1px solid #0096fd;
  outline: none;
}

.sketchy-diagrams-category-button:hover {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.sketchy-diagrams-category-button {
  border: 1px solid #ddd;
  border-radius: 2px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  color: rgba(00, 00, 00, .54);
  cursor: pointer;
  font-family: 'Arial';
  font-size: 13px;
  font-weight: 500;
  margin-left: 16px;
  margin-top: 16px;
  position: relative;
  width: 256px;
  height: 100px;
}

.sketchy-diagrams-category-button-heading {
  background-color: rgba(255, 255, 255, .95);
  border-radius: 0px 0px 2px 2px;
  bottom: 0px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px -1px rgba(0, 0, 0, 0.12), 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
  height: 21px;
  line-height: 21px;
  padding-bottom: 10px;
  padding-top: 11px;
  position: absolute;
  vertical-align: middle;
 ...

JavaScript

window.sidebar = document.getElementsByClassName('sketchy-diagrams-sidebar')[0];
window.categories = document.getElementsByClassName('sketchy-diagrams-sidebar-categories')[0];

window.onShowClick = function() {
  sidebar.style.display = 'block';
  // uncomment the console log to fix for firefox
  // console.log(categories.scrollTop);
  categories.scrollTop = 0;
  console.log('on click');
}

window.onHideClick = function() {
  sidebar.style.display = 'none';
  console.log('on hide');
}