Chrome中的推侧菜单生涩的CSS转换过渡 [英] Push side menu jerky CSS transform transition in Chrome

问题描述

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

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

 ＃response-menu-pro-button，＃response-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; 
过渡计时功能：三次贝塞尔（0.77，0，0.175，1）！ 
} 
  

另外，设置 transition-delay：.0s 应该使用包装器滑块 >但不适用。也许我没有选择正确的元素（？），或者有一个延迟值设置会干扰该规则，但是即使在这种情况下，我也没有找到任何延迟值（使用Agent Ransack Responsive菜单文件搜索）。

  @媒体屏幕和（最小宽度：767像素）{
 .edge-wrapper-inner，.edge-wrapper，.response -menu-pro-open，.response-menu-pro-close，
＃response-menu-pro-wrapper，＃response-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; 
} 
} 
  

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

在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扩展评分（无损失重新压缩图像已检查）

我尝试使用Chrome控制台/性能中的运行时性能来分析动画序列，但我不确定

问题：

是否有可能找到代码/脚本/行/事件是否导致滑块在菜单打开/关闭时停顿并调整代码，以使动画流畅，而在最新版本的Chrome中没有抖动的粘滞效应，并且滑块与包装器在同一时间平移？我感兴趣的持续时间动画值几乎保持不变，而不是更少。

网站测试页

解决方案

已解决。这与浏览器重排， backface-visibility：hidden 无关，与匹配css过渡设置有关。我已经这样修改过：

 ＃response-menu-pro-button，
＃response-menu-pro容器，
＃响应菜单专业头，
按钮＃响应菜单专业按钮，
 .edge-wrapper {
 -webkit-transition：2.6s缓解; 
 -moz-transition：轻松2.6秒； 
 -ms-transition：轻松2.6秒； 
 -o-transition：轻松2.6秒； 
过渡：轻松2.6秒； 
 -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）; 
过渡计时功能：三次贝塞尔曲线（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; 
过渡属性：转换； 
} 
 
＃response-menu-pro-container.push-left，
＃response-menu-pro-container.slide-left {
 -webkit-转换：translate3d（-800px，0，0）; 
 -moz-transform：translate3d（-800px，0，0）; 
 -ms-transform：translate3d（-800px，0，0）; 
 -o-transform：translation3d（-800px，0，0）; 
转换：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）; 
} 
 
 .response-menu-pro-open＃response-menu-pro-container.push-left，
 .response-menu-pro-open＃response-menu -pro-container.slide-left {
 -webkit-transform：translate3d（0，0，0）; 
 -moz-transform：translation3d（0，0，0）; 
 -ms-transform：translation3d（0，0，0）; 
 -o-transform：translation3d（0，0，0）; 
转换：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）; 
} 
  

感谢您的时间&兴趣！

I have this situation and I am interested to know what can I do, in order to have a smooth menu sliding movement, all the way to the right (at menu-open) and to the left (at menu-close) without that jiggling interrupted-sticky effect at the beginning and the end of the movement that sometimes is covering the body site wrapper;

I've tried to apply a smooth transition but the issue is still there:

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

Also, setting transition-delay: .0s should make the slider translate in the same time with the wrapper but it doesn't apply. Maybe I am not selecting the right elements (?) OR there is a delay value set that interferes with this rule but even in this case, I didn't find any (searched with Agent Ransack the Responsive menu files).

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

Please watch the yellow menu container marked with red arrow using the about/close button, upper left corner in order to see the jiggling unwanted effect; Will be noticeable at the end of the movement at menu-open or menu-close, visible on right edge of the slider and left edge of the wrapper. In ideal conditions, with no delays, no jiggling, these 2 elements the slider + wrapper, should be like one single piece. But it looks like there are some kind of sticky-elastic(?) properties applied that call/react, introducing this delay/jiggling.

Tested in Win 10 64bit, 16GB RAM, AMD Radeon HD 7700, Chrome Browser 69.0.3497.81 Official Build 64-bit, default chrome://flags settings with hardware acceleration enabled and also Edge - where the issue is obvious, all the way of the movement but that's another story.

LE : Regarding the Browser Reflow,
The strange thing, using cache and minify html/js/css plugins, Gzip compress, html output pages in wordpress, and so on, doesn't help in achieving a smooth animation, even if I obtain a pretty nice score after optimization as follows:

PageSpeed Insights Chrome extension score (Lossless re-compresssion images checked)

Pingdom score for EU server

I've tried to analyze the animation sequence using Runtime Performance in Chrome console/ Performance but I'm not so sure what to looking for.

The question:
Is there any possibility to find the code/script/line/event responsible for the slider stuttering at menu-open/close and to tweak the code in order to make the animation smooth with no jiggling interrupted-sticky effect in Chrome latest version and the slider to translate in the exactly same time with the wrapper? The duration animation value I am interested to remain pretty much the same, not less.

Website testpage here.

Tip: If the above described unwanted effect doesn't shown, just set CPU 4x ...6x slowdown in Performance Tab (Chrome Console).

解决方案

Solved. It was not about browser reflow, backface-visibility:hidden or whatever, it was about matching the css transition settings; I've modified like this:

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

Thank you for your time & interest!

这篇关于Chrome中的推侧菜单生涩的CSS转换过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！