Presently, I am endeavoring to obtain the desired outcome in Internet Explorer versions 9, 10, and 11 (functions flawlessly on Chrome and Firefox):
When in mobile mode, there is a principal #container envelop that encompasses the entire website content along with a hidden navigation side menu div located within the #container (which cannot be relocated elsewhere), remaining concealed off-screen. Upon activation of the toggle button for opening the menu, it is intended for the #container to slide towards the right, thus unveiling the nav side menu div situated directly to its left. The sliding motion is executed through translateX, promptly assigned upon application of the "open" class via the toggle. In the case of Internet Explorer browsers, the animation component presents itself accordingly; however, the side nav does not become visible ('empty space' solely).
#container {
height: 100%;
position: relative;
transition: transform ease .5s;
width: 100%;
}
#container.open {
position: fixed;
transform: translateX(300px);
}
#nav-side-menu {
left: -300px;
height: 100%;
overflow: scroll;
position: fixed;
top: 0;
width: 300px;
}