1337853 - Animation on inline SVG is erratic

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[:Felipe Gomes (needinfo for replies!)]

This page: https://theoutline.com/post/1030/timothy-leary-silicon-valley-technolibertarian implements an underline effect that is an animated squiggly line (look for the quote "The Earth is".. as an example)

This animation is implemented as an inline data:image/svg+xml as background image with some animated transform. It runs somewhat smoothly in Chrome (you can see a few frame drops in my machine), but it does big jumps in FF.

I've isolated the svg in the URL field here, let's see if Bugzilla will handle it well

Comment 1

[Robert Longson [:longsonr]]

Attachment: initial state

Comment 2

[Robert Longson [:longsonr]]

Attachment: final state

Comment 3

[Robert Longson [:longsonr]]

This has nothing to do with animation.

In Chrome the initial and final state look the same, in Firefox they look different hence the jump

Comment 4

[Brian Birtles (:birtles)]

This is basically because of differences in transform-box defaults. On Nightly where SVG transform-box is enabled, if I manually set transform-box: fill-box (the default that Chrome uses despite being different to the spec), then the initial and final state appear the same.

I notice Simon Fraser seems to suggest that the spec will be updated to make view-box the default. In which case we still need to convince Chrome to change. If that's the case, then this content is simply buggy and will be buggy in Chrome when they update to match the spec.

Comment 5

[Brian Birtles (:birtles)]

I've sent mail to Tab and Simon to try to seek a resolution on this. Hopefully the following issue will be updated with any outcome of that:
https://github.com/w3c/csswg-drafts/issues/857

Comment 6

[Brian Birtles (:birtles)]

Changing component to SVG since this is about the transform-box property as applied to SVG. I suspect we'll end up either duplicating this or marking it invalid, however.

Comment 7

[Jonathan Watt [:jwatt]]

Possibly not a perf issue based on comment 3, but flagging as perf until someone looks at that and confirms either way.

Comment 8

[Robert Longson [:longsonr]]

This is just the usual Chrome transform-origin bug. If they set transform-box: fill-box it works in Firefox trunk. It's not a perf issue either.

Comment 9

[Jonathan Watt [:jwatt]]

Thanks, Robert.