Transform translate covers full page (ie9)

Question

I have a slide out drawer which activates when i click the button (toggles a class).

The CSS works fine - however, for IE9 (even with toggle is off) the entire page is covered. It is just for IE9 (this problem)

Would anyone have any idea on why this is happening:

 $('.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

First of all: I don't have IE9, so I debugged on IE10. It had the same problem, so I assume it will have the same solution.

I noticed that you have set position: fixed in the content slider. When removed, it seems to be working in IE. Hope it will fix it for you.

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

Should become:

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

Notice the "position: fixed" being removed.

See demo: http://codepen.io/anon/pen/PqXpxx