Smooth scrolling in IE 11 and 10 breaking CSS transform matrix

I have a mobile menu that's using a transform matrix to animate the body content aside. Basically once the menu button is clicked, the menu slides over and a class is applied to the content that slides it aside.

 // Toggle Mobile Menu
  $("#menu-toggle").click(function() {
    // closed menu
    if ($("#menu__display").hasClass("header__navigation__show")) {
      $("#menu__display").removeClass("header__navigation__show");
      $("#push__content").removeClass("side__push").addClass("side__collapse");
    } else {
      // open menu
      $("#menu__display").addClass("header__navigation__show");
      $("#push__content").removeClass("side__collapse").addClass("side__push");
    }
  });

.side__push {
  transform: matrix(1, 0, 0, 1, 300, 0);
  transition: 1s ease;
}

The animation works fine, until you click on an anchor link in the mobile menu, which triggers smooth scrolling and a focus change to the scrolled element. For some reason, in IE11 and 10 this breaks the transform matrix and the body content jumps back over to the left side of the window.

// Smooth scrolling
// Select all links with hashes
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').not('[data-lity]').click(function (event) {
    // On-page links
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        if (target.length) {
            var headerHeight = ($("header").height()) + 58;
            var scrollToPosition = (target.offset().top) - headerHeight;
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();
            $('html, body').animate({
                scrollTop: scrollToPosition
            }, 1000, function () {
                // Callback after animation
                // Must change focus!
                var $target = $(target);
                $target.focus();
                if ($target.is(":focus")) {
                    return false;
                }
                else {
                    $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
                    $target.focus(); // Set focus again
                }
                ;
            });
        }
    }
});

I can't figure out what's going wrong. The CSS isn't updated when this happens, and it actually works fine in IE9 ironically.