Absolute positioning bug in display:table-cell in IE 11 - html

Question

Compare and contrast this JSfiddle in Chome (correct) and IE11 (very definitely not correct):
http://jsfiddle.net/Lr90ko3q/
IE seems to see the height of the CONTENT in the inner div, rather than the actual height of the div. In other words, if you add a couple more lines of content, the left/right arrows move down a bit.
Is this a known bug, and is there a usable workaround for it?
Thanks
(copy of JSfiddle code):
html {
box-sizing:border-box
}
*, *::before, *::after {
box-sizing:inherit
}
html, body {
position:relative;
width:100%;
height:100%
}
section {
width:60%;
height:60%;
position:relative;
background:rgba(0, 0, 0, 0.1)
}
section>.content {
display:table;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:50px
}
section>.content>div {
display:table-cell;
vertical-align:middle;
position:relative;
background:rgba(255, 0, 0, 0.2);
text-align:center
}
#left {
position:absolute;
left:5%;
top:50%;
margin:0;
transform:translateY(-50%)
}
#right {
position:absolute;
right:5%;
top:50%;
margin:0;
transform:translateY(-50%)
}

Answer 1

I fixed the issue by just adding JS that forces a fixed height on the table cell elements.
Also used native JS since the functionality is fairly simple and supported on each of the browsers.
Obviously replace .table/.table-cell with whatever you called your table/table-cell items that you're targeting.
"use strict";
var ua = navigator.userAgent.toLowerCase();
var ie_version = (ua.indexOf('msie') != -1) ? parseInt(ua.split('msie')[1]) : false;
if (!ie_version && ua.indexOf("trident") !== -1 && ua.indexOf("rv:11") !== -1)
{
ie_version = 11;
}
if (ie_version == 9 || ie_version == 10 || ie_version == 11)
{
(function(){
window.onresize = calculateTableCellHeights;
calculateTableCellHeights();
function calculateTableCellHeights() {
// Fixes IE9/10/11 bug where table-cell doesn't inherit table height
var tables = document.querySelectorAll(".table");
for (var t = 0; t < tables.length; ++t)
{
var table = tables[t];
var table_cells = table.querySelectorAll(".table-cell");
for (var c = 0; c < table_cells.length; ++c)
{
var table_cell = table_cells[c];
var display = window.getComputedStyle(table_cell, null).getPropertyValue("display");
if (display == "table-cell")
{
// Set fixed height
table_cell.style.height = table.offsetHeight+"px";
}
else
{
// If item is no longer a table-cell due to responsive stacking
// remove the height.
table_cell.style.height = "";
}
}
}
}
})();
}