performance issues using HTML5 and CSS transformations

[chick01]

Currently we are encountering animation and sound
performance issues in an HTML5 project targeted for 10” Android Tablet running
Jelly Bean 4.2.2 and would like to know if anyone has had the same issues
and/or has resolved this type of issue using HTML5. Our goal is to convert an
existing Adobe Flash application to a pure HTML5 solution so we can be more
platform agnostic. Our HTML5 application runs in the Chromium Portable browser
in kiosk mode. We are currently developing the solution using HTML5, JavaScript
Libraries (Jquery, Backbone and Underscore) and Adobe Phone Gap for Native
Sound Support. We are using CSS transforms for animations and we queue sounds
at the same time so our animations run to give our end-user sound and
animations together. We only have a one animation and sound running at the same
time with long breaks between animations. In development this will works fine,
however once compiled and deployed to the device we will start have issues.
Issues include random animations starting without sound or sounds without
animations or animations and sounds will run without stopping. We have made
sure all development tools and firmware were up to date, we have tried
different compilers and we have removed Phone Gap and replaced it with COCOS2D
with no luck. The only thing that has help is the recent updates provided by
Phone Gap but this has not resolved the issues completely. Debug code shows our
biggest issues is in the APK compiled code and how it interacts with our HTML5
code. We have started to address specific issues but we fear this will become a
specific implementation for Jelly Bean and we will not be able to reuse our
code for different platforms.  If anyone has encountered this issue and
has found a solution we would appreciate any input.