Menu icon Foundation
Off-canvas performance improvement

Dear Zurb,

I have been working extensively with the off-canvas menu, and I would like to suggest an improvement that makes quite a difference. If you have tried using the off-canvas menu when the page has a substantial amount of content (for example lots of images), the canvas toggle becomes quite sluggish (especially on mobile devices). The transition itself still works nicely (it is after all hardware-accelerate translate3d), but there seems to be a substantial delay while the browser prepares the transition.

The problem is solved by adding a blank translate3d to the inner-wrap element. Somehow, this prevents the browser from having to prepare the transition. You can try it yourself ...

.inner-wrap {
    // Speed up sluggish transition delay by pre-setting transform
	@include transform(translate3d(0,0,0));
}         

Screen shot 2014 01 01 at 14.04.42

off-canvasSuggestion

Dear Zurb,

I have been working extensively with the off-canvas menu, and I would like to suggest an improvement that makes quite a difference. If you have tried using the off-canvas menu when the page has a substantial amount of content (for example lots of images), the canvas toggle becomes quite sluggish (especially on mobile devices). The transition itself still works nicely (it is after all hardware-accelerate translate3d), but there seems to be a substantial delay while the browser prepares the transition.

The problem is solved by adding a blank translate3d to the inner-wrap element. Somehow, this prevents the browser from having to prepare the transition. You can try it yourself ...

.inner-wrap {
    // Speed up sluggish transition delay by pre-setting transform
	@include transform(translate3d(0,0,0));
}         

Screen shot 2014 01 01 at 14.04.42
Karl Ward over 5 years ago

Hmm I encountered an issue: by setting translate3d on the .inner-wrap, you may be affecting elements inside with position fixed.

Robin Cox over 5 years ago

That produces this error for me:

Undefined mixin ´Transform´

Daniel Acree over 5 years ago

The off-canvas nav is still very sluggish on my iphone. I tried the solution above but it didn't seem to help much, unless I am missing something in my implementation. I do have really large images on my site, but I don't think it should be this slow. http://wordpress.remindermedia.com/ Wondering if anyone has any other suggestions for improving the performance, or if I should switch to a different off canvas solution.

Daniel Mejia over 5 years ago

That's a nice looking off canvas.. hats off

Robin Cox over 5 years ago

@Daniel Acree it's even a bit sluggish on my desctop chrome.

Anyway, thats one hell of a nice site you got there :)