Question

我所拥有的是一个offcanvas导航，一旦打开就移动整个页面。它看起来像这样：

.offcanvas {
    position: fixed;
    padding-left: calc($unit * 8);
    z-index: 3;
    height: 100%;
    width: 420px;
    top: 0;
    right: 0;
    background: $color-secondary;
    overflow-x: hidden;
    transform: translateX(420px);
    will-change: transform;
    transition: transform .2s ease-in-out;
}

单击一个按钮时，它会通过jquery获取一个类修饰符，并将其移动到窗口中：

    &--opened {
        will-change: transform;
        transform: translateX(0);
    }

内容包含在main中，一旦导航打开，内容也会被移动：

.main {
will-change: transform;
transition: transform .2s ease-in-out;

    &__moved {
        will-change: transform;
        transform: translateX(-420px);
    }
}

除了Firefox（54.0.1）之外，它在Windows和OSX上测试的每个主要浏览器都可以正常工作。打开和关闭菜单时，转换都非常滞后。我尝试添加 will-change：transform; ，但问题仍然存在。我尝试过使用 translate3d 和左/右，但这些没有帮助。

有没有人遇到过这些问题，你做了什么来解决这些问题？

谢谢！

使用转换时Firefox大量延迟：转换中的translateX（）

0 个答案: