Investigate how to improve spinner/throbber animation smoothness

RESOLVED WONTFIX

Status

Marketplace
Consumer Pages
P4
enhancement
RESOLVED WONTFIX
4 years ago
2 years ago

People

(Reporter: mat, Unassigned)

Tracking

({perf})

Points:
---
Dependency tree / graph

Details

(Whiteboard: [good second bug][possible_future_need])

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
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)
(Reporter)

Comment 1

4 years ago
Created attachment 8514386 [details] [diff] [review]
throbber.styl.diff

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 :(
(Reporter)

Comment 2

4 years ago
Submitted https://github.com/mozilla/fireplace/pull/751 to do experiments there, it'll be easier to follow than in bugzilla.
(Reporter)

Comment 3

4 years ago
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
(Reporter)

Comment 4

3 years ago
Branch with my experimentations: https://github.com/diox/fireplace/tree/improve-spinner-animations
Assignee: mpillard → nobody

Updated

3 years ago
See Also: → bug 988674
Blocks: 1094010

Updated

3 years ago
Whiteboard: [ktlo]

Updated

2 years ago
Whiteboard: [ktlo] → [good second bug][ktlo][good first bug]

Updated

2 years ago
Priority: P2 → P4
(Reporter)

Updated

2 years ago
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]

Updated

2 years ago
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.