[Django] #32051: Animation issues with rocket on Congrats page
Django
----------------------------------------+------------------------
Reporter: thibaudcolas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: master
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
----------------------------------------+------------------------
There are a number of issues with the rocket animation shown on the
Congrats page. In no specific order,
- The page take up between 10 and 30% of my CPU to render the animations
on a MacBook Pro from 2015.
- Firefox has a different animation from other browsers, where the rocket
`exhaust__line` extends further than it should.
- For other browsers (tested in Chrome and Safari on macOS), the smoke is
cropped to the sides because of root-level SVGs being `overflow: hidden`.
- The animation doesn’t respect [`prefers-reduced-motion:
reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-
reduced-motion) (more of an enhancement).
--
Ticket URL: <https://code.djangoproject.com/ticket/32051>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: thibaudcolas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: master
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by thibaudcolas):
* Attachment "32051-rocket-animation-performance.gif" added.
Screenshot of the Chrome DevTools showing CPU usage with the animation
Django
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: master
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Thibaud Colas):
* Attachment "32051-rocket-firefox.png" added.
Screenshot of animation rendering in Firefox
Django
Reporter: thibaudcolas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: master
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by thibaudcolas):
* Attachment "32051-rocket-safari.png" added.
Screenshot of animation rendering in Safari
Django
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: master
Keywords: | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Thibaud Colas):
* has_patch: 0 => 1
Old description:
> There are a number of issues with the rocket animation shown on the
> Congrats page. In no specific order,
>
> - The page take up between 10 and 30% of my CPU to render the animations
> on a MacBook Pro from 2015.
> - Firefox has a different animation from other browsers, where the rocket
> `exhaust__line` extends further than it should.
> - For other browsers (tested in Chrome and Safari on macOS), the smoke is
> cropped to the sides because of root-level SVGs being `overflow: hidden`.
> - The animation doesn’t respect [`prefers-reduced-motion:
> reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-
> reduced-motion) (more of an enhancement).
New description:
There are a number of issues with the rocket animation shown on the
Congrats page. In no specific order,
- The page take up between 10 and 30% of my CPU to render the animations
on a MacBook Pro from 2015.
- Firefox has a different animation from other browsers, where the rocket
`exhaust__line` extends further than it should.
- For other browsers (tested in Chrome and Safari on macOS), the smoke is
cropped to the sides because of root-level SVGs being `overflow: hidden`.
- The animation doesn’t respect [`prefers-reduced-motion:
reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-
reduced-motion) (more of an enhancement).
I’ve taken a stab at addressing these, and cleaning up unused CSS and SVG,
in https://github.com/django/django/pull/13463.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32051#comment:1>
Django
-------------------------------+--------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: master
Keywords: | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
--
Ticket URL: <https://code.djangoproject.com/ticket/32051#comment:2>
Django
-----------------------------------+--------------------------------------
Reporter: thibaudcolas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: master
Keywords: accessibility, ui | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
-----------------------------------+--------------------------------------
Changes (by thibaudcolas):
* keywords: => accessibility, ui
* ui_ux: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/32051#comment:3>
Django
-----------------------------------+--------------------------------------
Type: Bug | Status: new
Component: Core (Other) | Version: master
Keywords: accessibility, ui | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
-----------------------------------+--------------------------------------
Description changed by Thibaud Colas:
Old description:
> There are a number of issues with the rocket animation shown on the
> Congrats page. In no specific order,
>
> - The page take up between 10 and 30% of my CPU to render the animations
> on a MacBook Pro from 2015.
> - Firefox has a different animation from other browsers, where the rocket
> `exhaust__line` extends further than it should.
> - For other browsers (tested in Chrome and Safari on macOS), the smoke is
> cropped to the sides because of root-level SVGs being `overflow: hidden`.
> - The animation doesn’t respect [`prefers-reduced-motion:
> reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-
> reduced-motion) (more of an enhancement).
>
> I’ve taken a stab at addressing these, and cleaning up unused CSS and
> SVG, in https://github.com/django/django/pull/13463.
New description:
There are a number of issues with the rocket animation shown on the
Congrats page. In no specific order,
- The page take up between 10 and 30% of my CPU to render the animations
on a MacBook Pro from 2015.
- Firefox has a different animation from other browsers, where the rocket
`exhaust__line` extends further than it should.
- For other browsers (tested in Chrome and Safari on macOS), the smoke is
cropped to the sides because of root-level SVGs being `overflow: hidden`.
- The animation doesn’t respect [https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-reduced-motion `prefers-reduced-motion:
reduce`] (more of an enhancement).
I’ve taken a stab at addressing these, and cleaning up unused CSS and SVG,
in https://github.com/django/django/pull/13463.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32051#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Thibaud
| Colas
Type: Bug | Status: assigned
Component: Core (Other) | Version: master
Keywords: accessibility, ui | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
-------------------------------------+-------------------------------------
Changes (by felixxm):
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/32051#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Thibaud
| Colas
Type: Bug | Status: assigned
Keywords: accessibility, ui | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
-------------------------------------+-------------------------------------
Comment (by Mariusz Felisiak <felisiak.mariusz@…>):
In [changeset:"838e115ab159174f759f09d63398e1eed14e4dbe" 838e115a]:
{{{
#!CommitTicketReference repository=""
revision="838e115ab159174f759f09d63398e1eed14e4dbe"
Refs #32051 -- Cleaned up CSS and SVG in the 'Congrats' page.
- Removed unnecessary vendor prefixes.
- Removed unused CSS and SVG code.
- Removed invalid CSS.
- Removed IE9-only browser reset styles.
- Fixed animation on Firefox.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32051#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Thibaud
| Colas
Component: Core (Other) | Version: master
Keywords: accessibility, ui | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak <felisiak.mariusz@…>):
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"b807298c666711ba106b06fef05a25073c62b802" b807298]:
{{{
#!CommitTicketReference repository=""
revision="b807298c666711ba106b06fef05a25073c62b802"
Fixed #32051 -- Fixed rocket animation on the 'Congrats' page.
- Fixed congratulations smoke being cropped.
- Refactored congratulation rocket so the animation can be stopped.
- Made animation respect user preference for reduced animation.
- Made rocket animation stop after 7s.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32051#comment:8>