CSS animations prevented by iScroll

Showing 1-1 of 1 messages
CSS animations prevented by iScroll user2270 2/3/13 11:38 AM
I'm hoping there's a work-around for something I've found and it doesn't seem to be discussed in this group yet:

I've set up an iScroll-4 as full screen on an iPad to navigate through 20 pages of content sequentially, all is good. 
(I used the example 'Carousel' from the download package as the initial basis for the build.)

However, I'd like to include some basic CSS animations on a DIV here and there, like this...

------------------------------------------
-webkit-animation: showbars 3s ease-out 1s;

@-webkit-keyframes showbars
{
0%   {height: 0px;}
100% {height: 215px;}
}
------------------------------------------

Which is just a very basic reveal, however it seems like there's something in iScroll's javascript which interferes with or prevents, any animation outside what iScroll itself does. It will only partly show the change to the DIV or mostly shows no change of state at all. When I try to use an opacity animation from invisible to fully opaque, the DIV flashes, then animates a little bit then flashes some more, before becoming properly visible.

I would understand why we'd want to prevent CSS animations while the page is loading, or while the scroller is in motion, but when all is loaded and the 'page' being viewed is static, how can I get this to work? Any help would be greatly appreciated!

Worth noting: I tested the animation in Mobile Safari on iOS Simulator and it works fine, however there's no other browser or device combination that I can see where it works. Strange....