CSS转换已经具有转换的图层

Question

我有左右滑动面板，使用TranslateX进行动画处理。

我还使用了headroom jQuery插件，当用户使用Translate Y向上滚动时，该插件会降低顶部导航。

问题是如果在包装器div上声明转换，页面向上滚动时标题是不可见的。

如果transform: translateX(0px);从firebug中的包装中删除，则页面向上滚动时会修复标题。如果它存在，尽管有一个位置：固定属性，标题似乎在页面顶部是静态的。

基本HTML：

<div id="wrapper">
  <header>
  </header>
</div>

CSS SIDEBARS和WRAPPER：

#left-sidebar{
  background-color:#8BA6BC;
  position:fixed;
  top:0;left:0;
  width:80%;
  height:100%;
  z-index:20;
  overflow:auto;
  transform:translateX(-100%);
  -moz-transform:translateX(-100%);
  -webkit-transform:translateX(-100%);
  transition:-moz-transform .25s ease-in-out;
  -moz-transition:-moz-transform .25s ease-in-out;
  -webkit-transition:-webkit-transform .25s ease-in-out;
}
#left-sidebar-handler.open ~ #left-sidebar{
  transform:translateX(0);
  -moz-transform:translateX(0);
  -webkit-transform:translateX(0);
}
#right-sidebar{
  background-color:#8BA6BC;
  position:fixed;
  top:0;
  right:0;
  width:80%;
  height:100%;
  z-index:20;
  overflow:auto;
  transform:translateX(100%);
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);
  transition:-moz-transform .25s ease-in-out;
  -moz-transition:-moz-transform .25s ease-in-out;
  -webkit-transition:-webkit-transform .25s ease-in-out;
}
#right-sidebar-handler.open ~ #right-sidebar{
  transform:translateX(0);
  -moz-transform:translateX(0);
  -webkit-transform:translateX(0);
}
#wrapper{
  display:block;
  position:relative;
  min-height:100%;
  height:auto !important;
  height:100%;
  margin-bottom:-45px;
  z-index:5;
  transform:translateX(0);
  -moz-transform:translateX(0);
  -webkit-transform:translateX(0);
  transition:-moz-transform .25s ease-in-out;
  -moz-transition:-moz-transform .25s ease-in-out;
  -webkit-transition:-webkit-transform .25s ease-in-out;
}
#left-sidebar-handler.open ~ #wrapper{
   transform:translateX(80%);
  -moz-transform:translateX(80%);
  -webkit-transform:translateX(80%);
}
#right-sidebar-handler.open ~ #wrapper{
  transform:translateX(-80%);
  -moz-transform:translateX(-80%);
  -webkit-transform:translateX(-80%);
}

CSS for HEADER：

html.signed-in header{
  position:fixed;
  z-index:999;
  top:0;
  left:0;
  width:100%;
  min-height:46px;
  line-height:46px;
  background-color:#8BA6BC;
  color:#fff;
}
html.signed-in header.headroom{
  -webkit-transition:-webkit-transform 200ms linear;
  -moz-transform 200ms linear;
  transition:transform 200ms linear;
}
html.signed-in header.headroom--pinned{
  -webkit-transform:translateY(0%);
  -ms-transform:translateY(0%);
  -moz-transform:translateY(0%);
  transform:translateY(0%);
}
html.signed-in header.headroom--unpinned{
  -webkit-transform:translateY(-100%);
  -ms-transform:translateY(-100%);
  -moz-transform:translateY(-100%);
  transform:translateY(-100%);
}