Opened 4 years ago

Last modified 4 years ago

#32051 closed Bug

Animation issues with rocket on Congrats page — at Version 1

Reported by: Thibaud Colas Owned by: nobody
Component: Core (Other) Version: dev
Severity: Normal Keywords: accessibility, ui
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description (last modified by Thibaud Colas)

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.

Change History (4)

by Thibaud Colas, 4 years ago

Attachment: 32051-rocket-animation-performance.gif​ added

Screenshot of the Chrome DevTools showing CPU usage with the animation

by Thibaud Colas, 4 years ago

Attachment: 32051-rocket-firefox.png​ added

Screenshot of animation rendering in Firefox

by Thibaud Colas, 4 years ago

Attachment: 32051-rocket-safari.png​ added

Screenshot of animation rendering in Safari

comment:1 by Thibaud Colas, 4 years ago

Description: modified (diff)
Has patch: set
Note: See TracTickets for help on using tickets.
Back to Top