.push elements jump instead of animate on first click only
fredguest opened this issue · 10 comments
I'm on the latest Firefox, version 26.0 - rather than try to explain the behavior I just recorded it https://www.evernote.com/shard/s248/sh/217e1515-b76e-4446-a481-b6db125dd84b/d2480e5f71811ce92c9055835a36f720
The browser on the left is Chrome, the browser on the right is Firefox. As you can see bigSlide works beautifully in Chrome. In Firefox, the initial toggle jumps instead of animating, but every toggle thereafter is smooth. Same code obviously.
Thanks for the video. That is pretty janky in Firefox for that first animation. I did some digging and it seems like there are known issues with Firefox and CSS transitions. This article is a year old but talks about using translate over left/right positioning for better performance. I'll give that a shot and see if it helps.
Thanks again!
Good find! I was digging around for browser specific animation hacks and not finding anything promising. Can you confirm similar behavior on the first animation only in Firefox with your own code? Part of me has been wondering if this is some weird conflict in my code, I tried to strip it down to barebones css and bigSlide.js when testing but you never really know until someone else confirms that it's replicable behavior.
I am able to recreate in Firefox. I'll look into using translate though it may require making some changes to the plugin, so I'm doubtful that I'll get the fix in before the holidays (sorry!).
Good catch! Thanks again!
no rush man! thanks for investigating. i love the plugin.
this behavior seems to be occurring in Chrome now as well, presumably as a result of this update: http://googlechromereleases.blogspot.com/2014/01/stable-channel-update.html
I've confirmed this bug in Firefox 26.0 and Chrome 32.0.1700.77.
This is not happening in OSX Safari 7.0, nor on mobile Safari (iOS7 updated). Any brave IE souls able to replicate?
Ok, sorry for the multiple posts, but I went ahead and tried the translateX method. Seems to be very smooth. So much so that people might want to slow it down slightly.
It's a little sloppy for now, and as you'll see in the video below, some elements act oddly, so I'm not going to make a pull request for it yet. To see the code check here.
In this video, you'll see that I'm using this on a small website I'm making. It's smooth, but it messes up the navigation menu containing the button. That menu is nested inside a larger div.pull, so I'm not sure what's going on. I'm using foundation and that menu makes use of some of its CSS, so maybe there's a conflict. It used to work fine using the left method, however.
EDIT: It appears the using any transform property on elements in webkit browsers breaks position: fixed. You can even see that in my video. Dunno what the right solution is here.
Thanks @darth-cheney for looking into this! That's a bummer about position:fixed as that's a common use case. For your specific site, maybe try nesting the position fixed element? I worked on a web app recently with multiple fixed positioned elements and had to really fuss with the way positioning was called on individual elements.
Right after submitting that comment, I figured it out... Currently the position of the push is not being set when the page loads, so there is nothing to animate to. Adding push.css(settings.side, '0'); to:
menu.css(positionOffScreen);
push.css(settings.side, '0');
menu.css(animateSlide);
push.css(animateSlide);
fixes it (yay!).
I'll push a fix today. Thanks everyone for the help troubleshooting this!
ha! awesome. glad it was a simple fix.