推动侧边菜单生涩 CSS 在 Chrome 中转换过渡

Question

我遇到了这种情况，我很想知道我该怎么做才能使菜单滑动顺畅，一直向右（在 menu-open）和向左（在menu-close) 在移动的开始和结束时没有抖动 interrupted-sticky 效果，有时会覆盖 body 网站包装器；

我已尝试应用平滑过渡，但问题仍然存在：

#responsive-menu-pro-button, #responsive-menu-pro-container, .edge-wrapper {    
  -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;      
}

此外，设置 transition-delay: .0s 应该使 slider 与 wrapper 同时翻译，但它不适用。也许我没有选择正确的元素（？）或者有一个延迟值集干扰了这个规则，但即使在这种情况下，我也没有找到任何（用 Agent Ransack 搜索响应菜单文件）。

@media screen and (min-width: 767px) {
    .edge-wrapper-inner, .edge-wrapper, .responsive-menu-pro-open, .responsive-menu-pro-close, 
    #responsive-menu-pro-wrapper, #responsive-menu-pro-container.push-left {
        -webkit-transition-delay: .0s !important;
        -moz-transition-delay: .0s !important;
        -ms-transition-delay: .0s !important;
        -o-transition-delay: .0s !important;
        transition-delay: .0s !important;
    }
}

请使用 about/close 按钮观察左上角标有红色箭头的黄色菜单容器，以查看不想要的抖动效果；在 menu-open 或 menu-close 移动结束时会很明显，在滑块的右边缘和包装的左边缘可见。在理想情况下，没有延迟，没有抖动，滑块 + 包装器这 2 个元素应该是一体的。但看起来有某种 sticky-elastic(?) 应用了 call/react 的属性，引入了这个 delay/jiggling。

在 Win 10 64 位、16GB RAM、AMD Radeon HD 7700、Chrome 浏览器 69.0.3497.81 官方版本 64 位中测试，默认 chrome://flags 设置启用硬件加速和还有 Edge - 问题很明显，在整个运动过程中，但那是另一回事了。

LE : 关于浏览器回流，
奇怪的是，使用缓存和缩小 html/js/css 插件，Gzip 压缩，html 在 wordpress 中输出页面等等，没有'有助于实现流畅的动画，即使我在优化后获得了相当不错的分数如下：

PageSpeed Insights Chrome 扩展分数（无损 re-compresssion 图片已检查）

欧盟服务器的 Pingdom 分数

我尝试在 Chrome 控制台/性能中使用运行时性能来分析动画序列，但我不太确定要寻找什么。

问题：
是否有可能找到 code/script/line/event 负责滑块在 menu-open/close 处卡顿并调整代码以使动画流畅而 Chrome 中没有抖动 interrupted-sticky 效果最新版本和滑块与包装器在同一时间翻译？我感兴趣的持续时间动画值保持几乎相同，而不是更少。

网站测试页here。

提示：如果没有显示上述不良影响，只需在性能选项卡（Chrome 控制台）中设置 CPU 4x ...6x 减速。

Answer 1

添加此 CSS - #responsive-menu-pro-container{top:0; position: absolute;}.

此处的问题是浏览器回流，您可以在此处阅读更多信息 - https://developers.google.com/speed/docs/insights/browser-reflow。

Answer 2

尝试将 backface-visibility:hidden 与转换

放在一起

Answer 3

根据我从 this thread, the MDN will-change page 中发现的情况以及我自己的推理，此问题是浏览器固有的。我建议尝试一些事情。

我注意到当控制台更新元素的内联样式属性时出现了故障。在浏览器更新 DOM 之前 动画已经开始 。这表明 DOM 操作可能在那一刻减慢浏览器速度并导致动画中出现 "glitch"。我建议改为添加 class 更改。也就是说，不要更新内联样式，而是尝试在样式表中添加 class 或属性选择器，然后使用 JavaScript 更改 class 或属性名称。尝试选择器更改的某种组合来传播转换而不是内联样式。由于所有元素的变换都相同，您也可以尝试向所有三个元素添加相同的 class。这可能会有所帮助。

您也可以尝试将 will-change: [property name]; 添加到接受转换的所有元素。我不建议在网络检查器中对此进行测试，而是将其添加到页面源代码并刷新，因为网络检查器可能不会反映更改，因为页面已经加载和呈现。另请注意，MDN 文档声明要非常谨慎地使用 will-change，因为它比正常转换更消耗硬件资源。

这些建议对我来说不太可行，因为我只能通过网络检查器访问您的源代码。

让我知道你找到了什么。

Answer 4

已解决。这不是关于浏览器重排，backface-visibility:hidden 或其他什么，而是关于匹配 css 转换设置；我修改成这样：

#responsive-menu-pro-button,
#responsive-menu-pro-container,
#responsive-menu-pro-header,
button#responsive-menu-pro-button,
.edge-wrapper {
    -webkit-transition: 2.6s ease;
    -moz-transition: 2.6s ease;
    -ms-transition: 2.6s ease;
    -o-transition: 2.6s ease;
    transition: 2.6s ease;
    -ms-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -moz-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -o-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#responsive-menu-pro-container.push-left,
#responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(-800px, 0, 0);
    -moz-transform: translate3d(-800px, 0, 0);
    -ms-transform: translate3d(-800px, 0, 0);
    -o-transform: translate3d(-800px, 0, 0);
    transform: translate3d(-800px, 0, 0);
    -webkit-transform: translate(-800px, 0);
    -moz-transform: translate(-800px, 0);
    -ms-transform: translate(-800px, 0);
    -o-transform: translate(-800px, 0);
    transform: translate(-800px, 0);
}

.responsive-menu-pro-open #responsive-menu-pro-container.push-left,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); 
 }

感谢您的时间和兴趣！

推动侧边菜单生涩 CSS 在 Chrome 中转换过渡

Push side menu jerky CSS transform transition in Chrome

google-chrome-devtools

css-transitions

css-transforms