911674 - Optimize animations on Firefox OS page

Status: VERIFIED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Alex Gibson [:agibson]]

The animations on this page should be optimized where ever possible for better performance. We could probably do this in two separate parts:

1.) The top adaptive search section
2.) The middle 'Have it all' section

We should ideally use CSS transforms where ever possible.

Comment 1

[Alex Gibson [:agibson]]

PR opened here to optimize the 'Have it all' section:

https://github.com/mozilla/bedrock/pull/1204

Comment 2

[Chris More [:cmore]]

Also, as a note to use "highlight painted areas" tool in Firefox's developer tools. It is really cool to watch for flashing during animations and scrolling to see how a page could be improved for performance. It was introduced in Firefox 22 and the hacks blog: https://hacks.mozilla.org/2013/04/developer-tools-update-firefox-22/

Now that we have time to improve the site, can we remove the dependency on jQuery?

Comment 3

[Alex Gibson [:agibson]]

I think anywhere using jquery `animate` we should be able to improve upon. Some sections could probably use some very slight tweaks to the timings of animations as well.

Comment 4

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/b29e7c4731f5d3e0de637ef1953db5820edafd86
[bug 911674] Optimize have-it-all animations for Firefox OS page

https://github.com/mozilla/bedrock/commit/bd682e267512846a28075f7e4ebb2bbaa49ee282
Merge pull request #1204 from alexgibson/bug-911674-optimize-animations-have-it-all

[bug 911674] Optimize have-it-all animations for Firefox OS page

Comment 5

[raymond [:retornam] (inactive)]

Tested in Safari Version 6.1 (8537.66)
Chrome Version 31.0.1625.0 canary
Chrome Version 29.0.1547.65


and Firefox Nightly

Comment 6

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/e97f25010d163337bba5d3b3a9c4834a000638b6
Improve /firefox/os/ animation performance. Bug 911674.

- Update intro bgs, phone screen, adaptive bgs, adaptive
  feature points, & adaptive sprites.

- Performance in A-grade browsers seems far better (based
  on Fx repaints and Chrome frames).

- IE 9 and below get a slightly degraded experience. Can
  be improved if necessary.

- Fix IE8 bug where birthday bg would never show up in
  top fading section.

https://github.com/mozilla/bedrock/commit/c61c8a8b09639050d64e54cc84cd9b78d728abce
Merge pull request #1262 from jpetto/bug-911674-optimize-fx-os-adaptive-search

Improve /firefox/os/ animation performance. Bug 911674.