When a drop shadow has an extremely small blur radius, it may trigger an endless loop

[rgprog]

When dotlottie-web version 0.52.2 is asked to draw a drop shadow with an extremely low Softness value, it may enter an endless loop.

Drawing a frame containing a shadow with a Softness value equal to, or smaller than, a certain threshold value causes the browser tab to become unresponsive. In one case, the threshold was exactly 1/300; in another, it was exactly 1/900.

To reproduce the bug, load this Lottie file into this online viewer.

{"ddd":0,"fr":60,"h":180,"ip":0,"layers":[{"ddd":0,"ind":3,"ty":4,"nm":"","ln":"","parent":2,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ef":[{"ty":25,"nm":"","ix":0,"ef":[{"ty":2,"nm":"Shadow Color","ix":0,"v":{"a":0,"k":[0,0,0]}},{"ty":0,"nm":"Opacity","ix":0,"v":{"a":0,"k":255}},{"ty":1,"nm":"Direction","ix":0,"v":{"a":0,"k":135}},{"ty":0,"nm":"Distance","ix":0,"v":{"a":0,"k":5.657}},{"ty":0,"nm":"Softness","ix":0,"v":{"a":1,"k":[{"t":0,"s":[0.02],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":180,"s":[0],"h":1}]}}],"en":1}],"ip":0,"op":181,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"bm":0,"it":[{"ty":"rc","hd":false,"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[111.354,111.354]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[0,0,0,0]},"r":1,"o":{"a":0,"k":0}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0},{"ty":"gr","hd":false,"bm":0,"it":[{"ty":"rc","hd":false,"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[0.702,0.702,0.702]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0}]},{"ddd":0,"ind":2,"ty":3,"nm":"","ln":"","parent":1,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[40,40]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":1,"ty":3,"nm":"","ln":"","parent":0,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"","ln":"","parent":0,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":181,"st":0,"bm":0,"shapes":[{"ty":"rc","hd":false,"p":{"a":0,"k":[90,90]},"r":{"a":0,"k":0},"s":{"a":0,"k":[180,180]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}}]},{"ddd":0,"ind":0,"ty":3,"nm":"","ln":"","sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":181,"st":0,"bm":0}],"meta":{},"nm":"","op":180,"v":"5.7.4","w":180}

For me, playback stalls around frame 170 of 180. I've seen the bug in Chrome, Firefox and Safari, all on macOS. I've confirmed that the bug is caused by dotlottie-web, not lottie-web.

I've filed the issue in this repo rather than https://github.com/thorvg/thorvg, because I was unable to reproduce the bug in the ThorVG viewer.

[theashraf]

@rgprog dotlottie-web uses thorvg as a renderer, and it's showing consistent rendering with thorvg

cc @hermet

[rgprog]

Hi @theashraf - this issue isn't a rendering bug, but an endless loop. A call to a dotlottie-web function never returns, and so the browser's main loop freezes.

Can you reproduce the endless loop in ThorVG? I've only ever been able to reproduce it in dotlottie-web.

[hermet]

@theashraf Hello, could you please confirm this dotlottie side? I can't find any troubles in thorvg. Alongside it, the shadow distance has been fixed in PR Thanks.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[theashraf]

Hi @rgprog, apologies for the delay in getting back to you. This issue was actually resolved in a previous dotlottie-web release. If you update to the latest version, everything should work as expected