Push side menu jerky CSS transform transition in Chrome

Hey there,

I don’t get a jerky CSS transition and have tried in quite a few browsers. My plugin doesn’t do anything special in regards the transitions, it’s just a very simple transform transition.

#responsive-menu-pro-container {
   transition: transform 2.5s;
}

Have you tried playing around with different transition types. It also looks like you have added quite a few extra CSS points like changing the container to absolute, giving it a top 0 value as well as adding a transition delay and transition timing function that I don’t think are helping. When I strip all of those away it makes the whole animation a bit smoother for me but still it isn’t jerky in any case for me.

Maybe the below thread might help:

https://stackoverflow.com/questions/15605731/jerky-css-transform-transition-in-chrome

One answer suggests using the below CSS which you could try:

#responsive-menu-pro-container {
  will-change: transform;
}

Also from that thread:

When an animation runs slowly and looks uneven, it’s simply exposing the limitations of the browser that are always there.

Unfortunately I think long and slow animations will likely have these issues as well as being quite an annoying user experience.

Please advise

Peter

Done, I’ve made it!
And now It works smooooth as a baby’s a** (in Chrome latest version, no other browsers or mobile, I’m not interested); 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 once again Peter for your great plugin, time & interest!

Hey there,

Wow. I’m glad you got that sorted, good work!

Please let me know if you need anything else ??

Peter