位置：固定元素在Chrome上消失

Question

我有一个侧边栏（位置：固定），并且有一个“标签”的东西。

第一张图片显示关闭的侧边栏（仅限标签），第二张图片显示活动的侧边栏。仅当我使用 react-router 中的HashLocation更改路由时，才会出现此问题。当我直接进入正确的URL时，一切都很好。

我找到了this，但问题是我已经在使用transform: translate来打开并隐藏侧栏。

如果我应用此修复程序，它会显示但侧边栏上的元素正在消失。

侧边栏的规则如下：

.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;
    }
  }
}

来自反应组件（full component here）的相关render()方法：

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>
    );
  }

该问题还有其他解决办法吗？

我无法使用position:absolute，因为它导致Firefox显示由transform:translate

引起的滚动条