B2G/Best Coding Practice

Don't animate layout properties

The keypad gets 2-3 FPS when it scrolls in during a call. A quick search of the corresponding CSS shows why:

body.showKeypad #views {
  transition: top 0.3s ease;
  top: 0;
  z-index: 500;
}

Never, ever, animate top/left. Repeat after me: don't animate layout properties. Animate transforms.

The right approach here is to create a div and position it off the screen and then use transform to transition it in. That will be rendered once into a texture and the compositor thread will animate it with 60 FPS. Animating layout properties forces reflows, which forces the CPU to render the content. In a pixel pushing dogfight the CPU always loses against the GPU.

This little patch should do the trick:

--- a/apps/communications/dialer/style/oncall.css
+++ b/apps/communications/dialer/style/oncall.css

@@ -86,8 +86,8 @@ button::-moz-focus-inner {
 }
 
 body.showKeypad #views {
-  transition: top 0.3s ease;
-  top: 0;
+  transition: transform 0.3s ease;
+  transform: translateY(-100%);
   z-index: 500;
 }