javascript - 在 IE 11 和 10 中平滑滚动破坏 CSS 变换矩阵

Question

我有一个移动菜单，它使用变换矩阵来为正文内容设置动画。基本上，一旦单击菜单按钮，菜单就会滑过，并且将一个类应用于将其滑到一边的内容。

 // 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;
}

动画效果很好，直到您单击移动菜单中的锚链接，这会触发平滑滚动和滚动元素的焦点更改。出于某种原因，在 IE11 和 10 中，这会破坏变换矩阵，并且正文内容会跳回到窗口的左侧。

// 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
                }
                ;
            });
        }
    }
});

我不知道出了什么问题。发生这种情况时 CSS 不会更新，具有讽刺意味的是，它实际上在 IE9 中运行良好。

标签： javascriptjquerycssinternet-explorer