Open Bug 1865638 Opened 2 years ago Updated 2 years ago

Animating SVG path choppy

Categories

(Core :: CSS Transitions and Animations, defect)

Product:
Core
Component:
CSS Transitions and Animations
Version:
Firefox 119
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: ian.stewart, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/119.0

Steps to reproduce:

Tried to animate an SVG with css.

Actual results:

Animation of the SVG path is super choppy unless you inspect the specific SVG that has animating paths.

https://codepen.io/Ian-Stewart/pen/BaMYEoJ

Expected results:

SVG paths should animate smoothly.

Component: Untriaged → CSS Transitions and Animations
Product: Firefox → Core

It doesn't seem choppy to me but rather that half the circles aren't rendered at all. This might be an SVG/Graphics bug but it's also possible we're over-optimizing the animation too.

Yes it is indeed rendering half the SVG/ Animation. However if you keep moving your mouse it shows a bit more (but choppy). The kicker is when you open the inspector and highlight the SVG the rendering and animation seem fine.

It seems to me that as long as I keep the mouse moving, the complete animation appears; but the moment the mouse stops moving, the animation also stops rendering, and then basically only half of each cycle appears, with the rendering stopping at the exact place where the mouse stopped, and then reappearing half-way further around the circle.

The interaction with mouse movement does feel to me more like it's an Animation bug than a Graphics one. Weird, though.

Severity: -- → S3
You need to log in before you can comment on or make changes to this bug.