From e5b6c2e5aea1c2e8607482a621ffb633ac5bc6fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Davidovi=C4=87?= Date: Mon, 26 Aug 2024 20:29:55 +0200 Subject: [PATCH] fix: Avoid desync between start and end (outer and inner) radial gradient circles 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. --- player/js/elements/helpers/shapes/SVGElementsRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/player/js/elements/helpers/shapes/SVGElementsRenderer.js b/player/js/elements/helpers/shapes/SVGElementsRenderer.js index 2112f2cf8..e438dbf05 100644 --- a/player/js/elements/helpers/shapes/SVGElementsRenderer.js +++ b/player/js/elements/helpers/shapes/SVGElementsRenderer.js @@ -186,7 +186,7 @@ const SVGElementsRenderer = (function () { itemData.of.setAttribute('r', rad); } } - if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) { + if (itemData.s._mdf || itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) { if (!rad) { rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2)); }