Chrome中的推侧菜单生涩的CSS转换过渡

Question

我遇到这种情况，我很想知道我该怎么办，以使菜单一直向右滑动（在打开菜单时）和一直向左滑动（在关闭菜单时）在动作的开始和结束时没有抖动的打扰性打断粘连效果，而该动作有时会覆盖身体部位包裹物；

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

#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 Responsive菜单文件搜索）。

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

请使用左上角的“关于/关闭”按钮观看带有红色箭头标记的黄色菜单容器，以查看不想要的抖动效果；移动结束时，在菜单打开或菜单关闭时会很明显，在滑块的右边缘和包装器的左边缘可见。在理想的条件下，没有延迟，没有抖动，滑块+包装器这两个元素应该像一件一样。但是看起来好像有一些粘弹性（？）属性被应用来进行调用/反应，从而引入了这种延迟/抖动。

在Win 10 64位，16GB RAM，AMD Radeon HD 7700，Chrome浏览器69.0.3497.81官方版本64位，已启用硬件加速的默认chrome：// flags设置以及启用Edge的情况下进行了测试-明显存在问题运动的方式，但这是另一个故事。

LE：关于浏览器重排，
奇怪的是，使用缓存并缩小html / js / css插件，Gzip压缩，wordpress中的html输出页面等等，都无济于事。动画，即使经过以下优化也获得了不错的成绩：

PageSpeed Insights Chrome扩展程序得分（检查了无损重新压缩图像）

EU服务器的Pingdom得分

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

问题：
是否有可能在菜单打开/关闭中找到导致滑块卡顿的代码/脚本/行/事件，并调整代码，以使动画流畅且在Chrome最新版本和滑块与包装器在同一时间进行翻译？我希望保持动画的持续时间值几乎相同，而不是更少。

网站测试页here。

提示：如果未显示上述不良影响，只需在“性能”标签（Chrome控制台）中将CPU速度降低4倍... 6倍即可。

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线程，MDN will-change page中发现的信息以及我自己的推理，这个问题是浏览器固有的。我建议尝试一些方法。

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

您还可以尝试将will-change: [property name];添加到所有接收转换的元素中。我不建议在Web检查器中对此进行测试，而是将其添加到页面源代码中并刷新，因为Web检查器可能无法反映所做的更改，因为该页面已经加载并呈现。另外请注意，MDN文档指出使用意志变更非常少，因为它比常规转换消耗更多的硬件资源。

这些建议对我来说实际上并不可行，因为我只能通过Web检查器访问您的源代码。

让我知道您的发现。

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

感谢您的时间和兴趣！