Giters

Rich-Harris / ramjet

Morph DOM elements from one state to another with smooth animations and transitions

Home Page:http://www.rich-harris.co.uk/ramjet/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Transition problem in Chrome browser

imperator-maximus opened this issue · comments

commented

Hi,
I have a transition problem in Chrome browser.
This is how it should look like and it is working in Safari, Firefox and IE11:
http://www.gfycat.com/EachFabulousAfricanpiedkingfisher
But in Chrome browser only I am getting this:
http://www.gfycat.com/ElasticHelpfulDoe
At the moment it is difficult to provide sample code because it is a huge intranet application but somebody might have an idea anyway?
Thanks!

commented

I think I'm having this same problem. It looks like, at least for me, it has to do with scrolling. I have one of my elements within a scrollable div. And when I transition with ramjet, it seems to be transition to/from that object's original position before scrolling, not its current position. It seems like only the clone of the original object does this, not the other object. i.e. transition from a to b, a animates correctly to b's updated position, but the clone of b animates to b's former position.

EDIT:
Looks like it was resolved by making sure that the container for my divs that were going to transition was set to 'position: relative.'

Might want to give that a try if you're having this problem.

commented

thanks for feedback. I checked my code and there wasn't any scrollable div. But I found the problem now. I had in a parent of the source element a "transform-style: preserve-3d;". This was the reason for the problem in Chrome. In my code I can change this so this is solved for me.

commented

Hey - thanks for this, it sounds like there are two separate bugs that need solving. The next version will be a lot smarter about dealing with existing CSS transforms, but I don't think it currently accounts for preserve-3d, so that's something I'll need to look at. Hoping to get a chance to work on this stuff in the next few days, sorry for the delay in the meantime!

commented

I think this should be fixed using appendToBody: true (currently on master). I am closing the issue, if you still se any problem it would be helpful having a test case.