问题
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).
回答1:
Add this CSS - #responsive-menu-pro-container{top:0; position: absolute;}.
The issue here was browser reflow, you can read more here - https://developers.google.com/speed/docs/insights/browser-reflow.
回答2:
Try putting backface-visibility:hidden alongside with transitions
回答3:
From what I've found from this thread, the MDN will-change page, and my own reasoning, this issue is innate to the browser. There are a few things I suggest trying.
I noticed the glitch appeared as the console updated the inline style properties of the elements. The animation had already started before the browser updated the DOM. This suggests the DOM manipulation may be slowing down the browser at that instant and causing a "glitch" in the animation. I suggest adding a class change instead. I.e., instead of updating the inline style, try adding a class or attribute selector in your stylesheet and use the JavaScript to change the class or property name instead. Try some combination of selector changes to propagate the transformation instead of inline styles. Since the transform is the same for all the elements, you could also try adding the same class to all three. That might help.
You might also try adding the will-change: [property name]; to all the elements receiving the transformation. I do not recommend testing this in the web inspector but add it to the page source code and refresh as the web inspector may not reflect the change since the page would have already loaded and rendered. Also note the MDN doc states to use will-change very sparingly as it consumes hardware resources more so than normal transformations.
These suggestions aren't really feasible for me to implement since I only have access to your source code through the web inspector.
Let me know what you find.
回答4:
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!
来源：https://stackoverflow.com/questions/51898825/push-side-menu-jerky-css-transform-transition-in-chrome