Animation on inline SVG is erratic




2 years ago
2 years ago


(Reporter: Felipe, Unassigned)



Firefox Tracking Flags

(firefox54 affected)




(2 attachments)



2 years ago
This page: 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
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
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.
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:
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.
Component: DOM: Animation → SVG
Possibly not a perf issue based on comment 3, but flagging as perf until someone looks at that and confirms either way.
Depends on: 1208550
Keywords: perf
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.
Last Resolved: 2 years ago
Resolution: --- → INVALID
Keywords: perf
Thanks, Robert.
You need to log in before you can comment on or make changes to this bug.