transform: translateY Not Working on Style Attribute in IE/Edge

Question

We are implementing a simple frozen header for tabular data in our application, using this basic function:

$('.wrapper').on('scroll', function () {
  var translate = "translateY(" + this.scrollTop + "px)";
  this.querySelector('thead').style.transform = translate;
});

It works fine in Chrome/Firefox, and it does apply the right transform to the thead element's style attribute, but it doesn't seem to actually apply the transform in IE/Edge.

Here's a fiddle: https://jsfiddle.net/xLwgcsag/1/

Caniuse states that IE11/Edge both support it without prefixes, so is this a bug, and if so, is there a workaround?

Answer 1

Why not just use CSS to keep the headers fixed instead? Select the tr that holds the headers, and add the following to it:

#trHeader {
    position: absolute;
}