Offcanvas push isn't smooth

[lwensveen]

Hello,

I downloaded your offcanvas plugin, everything works fine except for the animation. It starts up slowly and then accelerates all of a sudden. The animation speed doesn't seem to be constant.

Is this a known bug and is there any way to fix this?

EDIT: in the example that is supplied it seems to add the following to the <div class="navbar navbar-default navbar-fixed-top canvas-slid">:

element.style {
left: 300px;
right: -300px;
}

While mine adds a:

element.style {
left: 300px;
}

[jasny]

@lwensveen Could you please provide a jsfiddle showcasing the issue and tell with which browsers you're experiencing this.

[lwensveen]

@jasny Sure, here you go: http://jsfiddle.net/GWzw5/

[jasny]

If you include bootstrap.js, the animation is smooth. See http://jsfiddle.net/jasny/GWzw5/2/ (added bootstrap.min.js to external resources).

Apparently Twitter Bootstrap is changing a global setting in one of it's js components (probably collapse), which makes the animations smooth.

I need to find out what this is and add it to Jasny Bootstrap, so it will work standalone.

@lwensveen I recommend adding Twitter Bootstrap's js for now.

[ducman]

I was playing around with this (without bootstrap) and randomly commented out the 2 transition lines in .canvas-sliding css and that fixed it. But hey, it was just me messing around with stuff (not really sure what I was doing, lol).

[ducman]

I left the class there but comment out the 2 transition lines.

.canvas-sliding {
  /*-webkit-transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
  transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;*/
}

[lwensveen]

Yeah that seems to fix it. Thanks dude. I still have the css problem though, it isn't adding the right: -300px. That causes my logo to jump under the toggle.

Any ideas?

[jasny]

With @ducman's solution there shouldn't be any animation at all. Question to myself: Is the check for CSS transition support failing and is fallback jQuery animation used?.

@lwensveen The css right property appears to be set to 0 (or this is misinterpreted by the plugin). Try setting right: auto.

[ducman]

@jasny & @lwensveen, I had some time today to sit down and see what the code is doing since I had the same question as @jasny did about the commented out css lines.

It turn out that you are correct, @jasny. I was just messing around with offcanvas.js without bootstrap. Bootstrap has transition.js in it, that's why the $.support.transition check work. Without bootstrap, $.support.transition is undefined and falls back on jquery to do the animation.

In summary, this is not a bug. You must use offcanvas with bootstrap (or at least with their transition.js).

[jasny]

@ducman Thanks! I'll mention it in the documentation.