Closed Bug 1091654 Opened 5 years ago Closed 4 years ago

Investigate how to improve spinner/throbber animation smoothness

Categories

(Marketplace Graveyard :: Consumer Pages, enhancement, P4)

enhancement

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: mat, Unassigned)

References

Details

(Keywords: perf, Whiteboard: [good second bug][possible_future_need])

Attachments

(1 file)

We currently have 2 types of spinners/throbbers:
- The one used in splash.css, with 3 squares changing opacity
- The one used everywhere else, which comes in multiple sizes, with a rotating circle

The splash one is often not animating properly, on both slow desktops and phones. It's painting all the time, and it seems that it doesn't benefit from OMTC as a result. 

The second one is only rotating and seems like it benefits from OMTC, but uses an image (bug 988674). Also, when it has padding on it (which happens fairly often) we repaint a lot more than what should be necessary (enable paint highlighting in devtools and you'll see it).

We should investigate how we can improve this. A couple ideas:
- For the splash one, maybe will-change: opacity (bug 940842) will help ?
- For the circle, consider rewriting the CSS to make only the circle spin (should be doable without any HTML change, just by moving the animation to ::before)
I tried to get improve the splash one by only changing opacity and adding will-change, but that didn't seem to do the trick: using Firefox OS 2.2, when the app is loading and busy doing a lot of stuff, the animation still suffers :(
Submitted https://github.com/mozilla/fireplace/pull/751 to do experiments there, it'll be easier to follow than in bugzilla.
For the record, will-change is not enabled in privileged apps, only certified, that's why the patch in comment 1 doesn't noticeably improve the situation. I filed bug 1092144.
Keywords: perf
Branch with my experimentations: https://github.com/diox/fireplace/tree/improve-spinner-animations
Assignee: mpillard → nobody
See Also: → 988674
Whiteboard: [ktlo]
Whiteboard: [ktlo] → [good second bug][ktlo][good first bug]
Priority: P2 → P4
Whiteboard: [good second bug][ktlo][good first bug] → [good second bug][ktlo]
While I agree this would be good to do, it's specific to certain devices. I'm removing [ktlo] but leaving [good second bug]. It's a worthy enhancement.
Severity: normal → enhancement
Whiteboard: [good second bug][ktlo] → [good second bug][possible_future_need]
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.