lottie-web icon indicating copy to clipboard operation
lottie-web copied to clipboard

fix: Avoid desync between start and end (outer and inner) radial gradient circles

Open geomaster opened this issue 5 months ago • 0 comments

Due to the way _mdf (modified) flags are checked in SVGElementsRenderer.renderGradient(), it's possible that the fx and fy components of a radial gradient, defining its "inner" circle (used for highlights via .h and .a members of a gf shape element in the Lottie JSON), fall out of sync with cx and cy which define its outer circle.

In particular, the branch which sets fx/fy triggers only when the gradient end point changes, but then sets fx and fy based on a calculation that involves both the start and end points. Therefore, if the start point of a gradient ever changes without a corresponding change in the end point, the cx/cy value will be updated but not the fx/fy value, causing visual artifacts.

File exhibiting issue: radial-gradient-repro.json

Current rendering: radial-gradient-repro-broken

After fix: radial-gradient-repro-fixed

geomaster avatar Aug 26 '24 20:08 geomaster