变换翻译涵盖整页（ie9）

Question

我有一个滑出式抽屉，当我点击按钮（切换一个班级）时它会激活。

CSS工作正常 - 但是，对于IE9（即使关闭切换），整个页面也会被覆盖。它只适用于IE9（此问题）

有人会知道为什么会这样吗：

$('.mainclick').click(function(e) {
  e.preventDefault();
  $('.fade').toggleClass('is-visible');
  /*  $('.left-panel').addClass(cssClass);
    $('.left-panel').attr('slidingClass', cssClass);*/
});

$('.fade').click(function(e) {
  e.preventDefault();
  $('.fade').toggleClass('is-visible');
});

//slide
.sliding-panel-content {
  // overflow:auto;
  max-height: none;
  overflow: hidden;
  top: 0px;
  bottom: 0px;
  // height: 100%;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  &.is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  &.middle-content {
    &.is-visible {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
  }
  .slide-content {
    max-height: none;
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #FFF;
    display: block;
    .fixedContent {
      max-height: 100%;
      position: absolute;
      overflow: auto;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      padding: 10px;
      background-color: #fff;
    }
  }
}
.sliding-panel-close {
  position: fixed;
  right: 22px;
  top: 17px;
  height: 19px;
  width: 19px;
  display: block;
}
.closeBtn {
  cursor: pointer;
}
.sliding-panel-fade-screen {
  position: fixed;
  overflow: auto;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  background: #ececec;
  opacity: 0;
  visibility: hidden;
  &.is-visible {
    opacity: 0.85;
    visibility: visible;
  }
}
.noscroll {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}
.right-panel {
  position: fixed;
  left: auto;
  right: 0px;
  width: 400px;
  -webkit-transform: translateX(400px);
  -moz-transform: translateX(400px);
  -ms-transform: translateX(400px);
  -o-transform: translateX(400px);
  transform: translateX(400px);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.left-panel {
  position: fixed;
  left: 0px;
  right: auto;
  width: 502px;
  -webkit-transform: translateX(-576px);
  -moz-transform: translateX(-576px);
  -ms-transform: translateX(-576px);
  -o-transform: translateX(-576px);
  transform: translateX(-576px);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.middle-content {
  position: fixed;
  margin: 0 auto;
  left: 0px;
  right: 0px;
  width: 85%;
  -webkit-transform: translateY(-85%);
  -moz-transform: translateY(-85%);
  -ms-transform: translateY(-85%);
  -o-transform: translateY(-85%);
  transform: translateY(-85%);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
  // position: fixed;
  // left: 8%;
  // top: auto;
  // width: 85%;
  // -webkit-transform: translateY(-115%);
  // -moz-transform: translateY(-115%);
  // -ms-transform: translateY(-115%);
  // -o-transform: translateY(-115%);
  // transform: translateY(-115%);
  // -webkit-transition: all 0.25s linear;
  // -moz-transition: all 0.25s linear;
  // transition: all 0.25s linear;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="js-menu-screen sliding-panel-fade-screen"></div>

<div class="js-menu sliding-panel-content left-panel">
  <div class="slide-content">
    <div class="fixedContent">
      <span class="closeBtn sliding-panel-close"></span>
      <div class="dynContent">

        <div class="description-panel">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis aliquam libero, ut lobortis dui iaculis a. Pellentesque efficitur lorem sit amet nulla mattis maximus. Donec accumsan ultricies justo eget fermentum. Quisque dapibus aliquet nunc eu
          laoreet. Nulla ut nisl nec nibh dignissim cursus. Vivamus placerat erat dictum neque consequat faucibus. Phasellus condimentum diam nec sapien tempus venenatis. Aenean id velit quis tortor consequat lobortis. Vivamus leo orci, porttitor et augue
          sagittis, pretium rhoncus odio. Donec et neque eu purus tempus congue vitae nec ipsum. Nam tempor eros ac justo ullamcorper semper. In rhoncus lectus quis suscipit sollicitudin. Fusce vel ex mi. Morbi placerat lorem et velit egestas consequat.
          Phasellus odio ante, ullamcorper nec hendrerit eu, tempus a nibh. Ut non rhoncus tellus, et dignissim dolor. Donec tempor, diam auctor eleifend mattis, mi diam vestibulum arcu, eget laoreet velit massa ut nisl. Aliquam vel odio eu lorem lacinia
          placerat. Phasellus sed auctor leo, et hendrerit ex. Nunc quis orci sollicitudin, porttitor elit quis, tincidunt magna. Praesent at molestie dui, vitae ultrices mauris. Pellentesque sodales ullamcorper lacus ullamcorper pretium. Nam convallis
          orci orci, eget malesuada mauris auctor nec. Fusce vitae lectus ut elit commodo dignissim. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur sodales dui commodo velit euismod
          vulputate. Cras mollis imperdiet ipsum sed euismod. Sed facilisis purus quis placerat semper. Suspendisse ultrices tristique augue id rhoncus. Fusce pharetra interdum neque. Integer eros ante, pharetra eu mattis vitae, mollis vel dui. Donec
          vel rhoncus magna. Aenean dolor turpis, iaculis id viverra non, elementum nec sapien. Nullam vel ornare tellus. Duis at quam hendrerit, pretium diam sit amet, placerat risus. Quisque eu ex eros. Sed feugiat tristique purus, vitae egestas risus
          tincidunt ut. Mauris a massa arcu. Praesent sagittis pulvinar lectus, sed vehicula lacus dignissim ac. Nunc ullamcorper orci augue, eget maximus metus cursus sit amet. Pellentesque egestas eu velit nec faucibus. Fusce ornare felis leo, ut laoreet
          enim iaculis a. Integer vehicula nisi non orci lobortis, et lobortis velit congue. Phasellus sodales tellus ac euismod efficitur. In commodo ultricies pulvinar. In diam arcu, dignissim ac interdum porta, accumsan sed metus. Nunc convallis sem
          sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus iaculis, mi at pulvinar semper, nulla enim finibus nibh, ac semper sapien purus quis magna. Vestibulum et augue viverra, cursus ipsum
          nec, semper urna. Nam pretium est enim. Donec nec ante vehicula, sodales sem id, tincidunt quam. Quisque interdum, nunc eget interdum faucibus, turpis mi accumsan nulla, a faucibus sem nibh nec sem.



        </div>

      </div>
    </div>
  </div>
</div>

<a href="#" class="mainclick">Click here</a>

Answer 1

首先：我没有IE9，所以我在IE10上进行了调试。它有同样的问题，所以我认为它将有相同的解决方案。

我注意到您在内容滑块中设置了position: fixed。删除后，它似乎在IE中工作。希望能为你解决这个问题。

.slide-content {
    max-height: none;
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #FFF;
    display: block;
    }

应该成为：

.slide-content {
    max-height: none;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #FFF;
    display: block;
    }

注意"position: fixed"被删除。

请参阅演示： http://codepen.io/anon/pen/PqXpxx