1

I have a flip animation in a Phonegap app that is stuttering the first time the other side becomes visible, right at the frame where it would first become visible. It does not happen on any subsequent flips, unless I set that div to display: none and back (switching to another section of the app)

See http://codepen.io/MalikDrako/pen/KpVPdy for an example of what happens. I am testing on a Galaxy S5 with android 5.0 and using transition: transform to animate

My guess is it is not loading the images on the back until they become visible, is there a way to ensure they are loaded?

Edit: I looked at the timeline in the chrome Dev tools, and when the stutter happens, there are a bunch of Rasterize Paint events in the CompositorTileWorker that are not present when the stutter does not happen

Edit2: I tried removing everything but the main background and the flip controls (both shared for both sides) and it still happened. Could it be keeping two rasterized copies of these images on the GPU and unloading them any time they are not displayed? The images are SVG.

Edit3: I've narrowed it down to the main background svg, setting that to display: none (mostly) fixes the stutter. I am displaying it at 300px x 300px on that device. You can see the svg at https://www.dropbox.com/s/5tro0al491s4s4w/hex.svg?dl=0

Edit4: Since the background is the same for both sides, I moved it out to a shared element. This reduced the stutter to be barely perceptible, but now the first time it is flipped when the app is run, the animation lags and jumps to (almost) the end. Any subsequent flip until the app is restarted are fine (if the div has been visible since the last flip) or have the barely perceptible stutter (if the div has been set to display:none)

Malik Drako
  • 577
  • 1
  • 8
  • 19
  • You can preload images using javascript http://stackoverflow.com/questions/3646036/javascript-preloading-images – CupawnTae May 07 '15 at 21:18
  • I just tried that, and it didn't seem to help – Malik Drako May 07 '15 at 22:30
  • probably not image loading then. Haven't played with this stuff for a while, but in the past I've come across issues where the browser wasn't rendering parts of a large canvas until it theybecame visible. As a horrible hack I had it briefly show the entire canvas zoomed out, obscured by a mostly-opaque overlay (couldn't be completely opaque or same problem), then zoom in and remove the overlay. I *hope* there's a better solution to your issue than something like that, but if all else fails you could try it – CupawnTae May 07 '15 at 22:39
  • I could flip it before hiding the splash screen, but that doesn't really help when you return to that section – Malik Drako May 07 '15 at 22:46

0 Answers0