position: fixed element disappearing on Chrome

Question

I have a sidebar (which is position:fixed) and there's a "tab" thing.

First picture shows closed sidebar (tab only), and second one is active sidebar. The problem ONLY occurs when I change route using HashLocation in react-router. When I go straight into proper URL it's all fine.

I found this, but the problem is I'm already using transform: translate to open and hide sidebar.

If I apply this fix, It shows but element on sidebar are disappearing.

Rule for the sidebar looks like this:

.landscape-sidebar {
  bottom: 0;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX($landscape-sidebar-width);
  transition: $landscape-sidebar-transition-time transform $landscape-sidebar-transition-type;
  width: $landscape-sidebar-width;
  z-index: $level-4;

  &.show {
    transform: translateX(0);

    .content:hover:before {
      background-color: $landscape-sidebar-background-color;
    }
  }
}

Related render() method from react component (full component here):

render() {
    const sidebarClass = classNames({
      'landscape-sidebar': true,
      'show': this.state.isOpen,
    });

    return (
      <div className={ sidebarClass }>
        <div
          className="content"
          ref="sidebarContent"
          onWheel={ this.handleScroll }
        >
          <span
            ref="tab"
            onClick={ this.toggleSidebar }
            className="tab"
          />
          { this.props.children }
        </div>
      </div>
    );
  }

Is there any other fix for that problem?

I can't be using position:absolute because it's causing Firefox to display scrollbars due to transform:translate