Mapbox Bug with Zoom Control - mapbox

Question

I’m using mapbox.directions v0.3.0. I have come across a bug with the Zoom Control when using Internet Explorer only. It works fine with Edge, Chrome, and Firefox. I have the following layout:
<div id="pnlMapControl">
<div id="pnlRoutePane">
<div id="divRouteInputs"></div>
<div id="divRouteErrors"></div>
<div id="divRouteDirections">
<div id="divAlternateRoutes"></div>
<div id="divRouteInstructions"></div>
</div>
</div>
<div id="pnlMap"></div>
<div id="pnlStatusBar">
<span id="lblStatus">Status</span>
<span id="lblLatLon" style="float:right">LatLon</span>
</div>
</div>
pnlMapControl is a top level container control. pnlMap is the container for the Mapbox map. pnlRoutePane is where I want to have my input controls and display the instructions. I would prefer to keep the controls separate from the map container. pnlRoutePane is positioned on the left (and its visibility is toggled on and off so it is only visible when working with a route), and pnlMap is on the right.
My issue is, in IE11, when I click the zoom control on the map, it causes the parent pnlMapControl container to move left the width of pnlRoutePane and displays the Mapbox map at left position 0. All other browsers work without this issue. Is there something that can be done so that it will also work with IE?
Thanks in advance. My CSS is below:
#pnlMapControl {
position: absolute;
left: 0px;
right: 0px;
top: 60px;
bottom: 0px;
background-color: red;
}
#pnlRoutePane {
position: absolute;
left: 0px;
width: 300px;
top: 33px;
bottom: 20px;
background-color: lightseagreen;
display: none;
}
#pnlMap {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: lightyellow;
}
#pnlStatusBar {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 20px;
background-color: lightblue;
}
#lblStatus {
margin-left: 5px;
vertical-align: middle;
}
#lblLatLon {
margin-right: 5px;
vertical-align: middle;
}
#divRouteInputs {
position: absolute;
top: 10px;
left: 10px;
width: 280px;
height: 80px;
background-color:yellow;
}
#divRouteErrors {
position: absolute;
top: 120px;
left: 10px;
padding: 10px;
border-radius: 0 0 3px 3px;
background: rgba(0,0,0,0.25);
}
#divRouteDirections {
position: absolute;
top: 120px;
left: 10px;
bottom: 0px;
overflow: auto;
background: rgba(0,0,0,0.8);
}