I have been working on the email gaia app to make the div animations smooth as the user navigates through the app, and to avoid a "black flash":
https://bugzilla.mozilla.org/show_bug.cgi?id=828266 I implemented a workaround for the black flash, but sometimes the slide animation transitioning from the message list to an email message drops the animation and just jumps to the next div. It seems I can reliably reproduce this when the platform-provided black vertical scroll bar indicator is in the process of fading out. If I click on a message while the scroll bar is fading, the animation drops. However, if I wait for it to fully disappear (and wait a fraction of a second after I can no longer see it), then the div navigation animation is normally visible. Any hints or guidance on how to get a smooth animation in this case? --- You can try it yourself in latest gaia. Background on the div navigation: div style used for the animating divs. .card { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: white; -moz-transition-property: transform; -moz-transition-duration: 0.3s; -moz-transition-timing-function: ease; -moz-transition-delay: 0; } Two divs are animated at the same time, both sized to the size of the screen, with overflow:hidden. However, there are divs inside the animated div that do have overflow-y: auto. Frame rates are high for the CSS animation (frequently in 50 range) and repaint display shows solid, whole div-sized coloring on the repaints. James _______________________________________________ dev-b2g mailing list [email protected] https://lists.mozilla.org/listinfo/dev-b2g
