UI breakage on moving from version 3.1.2 to 4.1.3

[harishramu]

We recently decided to move from Lottie-ios version 3.1.2 to 4.1.3 to gain performance improvements.
But we notice a couple of clipping issues. These do not seem related to the rendering engine because setting the configuration to run on the MainThread does not resolve this.

Rolling back the version to 3.1.2 resolves this.

Which Version of Lottie are you using?

Lottie 4.1.3 on MacOS

Expected Behavior

No breakages to existing usages

Actual Behavior

The animation is getting clipped in one view, but appears properly in the other view.

Screen.Recording.2023-03-30.at.4.24.02.PM.mov

Animation JSON

{"v":"4.10.1","fr":29.9700012207031,"ip":0,"op":124.000005050624,"w":104,"h":64,"nm":"Typing","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"dot 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.384,"y":1},"o":{"x":0,"y":0},"n":"0p384_1_0_0","t":0,"s":[24,43.5,0],"e":[24,23.5,0],"to":[0,-3.33333325386047,0],"ti":[0,0,0]},{"i":{"x":1,"y":1},"o":{"x":0.596,"y":0},"n":"1_1_0p596_0","t":8,"s":[24,23.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":16,"s":[24,43.5,0],"e":[24,40.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":19,"s":[24,40.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"n":"0p667_0p667_0p167_0p167","t":22,"s":[24,43.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.384,"y":1},"o":{"x":0,"y":0},"n":"0p384_1_0_0","t":40,"s":[24,43.5,0],"e":[24,23.5,0],"to":[0,-3.33333325386047,0],"ti":[0,0,0]},{"i":{"x":1,"y":1},"o":{"x":0.596,"y":0},"n":"1_1_0p596_0","t":48,"s":[24,23.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":56,"s":[24,43.5,0],"e":[24,40.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":59,"s":[24,40.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":62.0000025253118}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[17.988,17.988],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2823529411764706,0.29411764705882354,0.3215686274509804,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1.5,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":124.000005050624,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"dot 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.384,"y":1},"o":{"x":0,"y":0},"n":"0p384_1_0_0","t":4,"s":[24,43.5,0],"e":[24,23.5,0],"to":[0,-3.33333325386047,0],"ti":[0,0,0]},{"i":{"x":1,"y":1},"o":{"x":0.596,"y":0},"n":"1_1_0p596_0","t":12,"s":[24,23.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":20,"s":[24,43.5,0],"e":[24,40.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":23,"s":[24,40.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":26,"s":[24,43.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.384,"y":1},"o":{"x":0,"y":0},"n":"0p384_1_0_0","t":44,"s":[24,43.5,0],"e":[24,23.5,0],"to":[0,-3.33333325386047,0],"ti":[0,0,0]},{"i":{"x":1,"y":1},"o":{"x":0.596,"y":0},"n":"1_1_0p596_0","t":52,"s":[24,23.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":60,"s":[24,43.5,0],"e":[24,40.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":63,"s":[24,40.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":66.0000026882351}],"ix":2},"a":{"a":0,"k":[-62,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[17.988,17.988],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2823529411764706,0.29411764705882354,0.3215686274509804,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1.5,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":124.000005050624,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"dot","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.384,"y":1},"o":{"x":0,"y":0},"n":"0p384_1_0_0","t":2,"s":[24,43.5,0],"e":[24,23.5,0],"to":[0,-3.33333325386047,0],"ti":[0,0,0]},{"i":{"x":1,"y":1},"o":{"x":0.596,"y":0},"n":"1_1_0p596_0","t":10,"s":[24,23.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":18,"s":[24,43.5,0],"e":[24,40.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":21,"s":[24,40.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":24,"s":[24,43.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.384,"y":1},"o":{"x":0,"y":0},"n":"0p384_1_0_0","t":42,"s":[24,43.5,0],"e":[24,23.5,0],"to":[0,-3.33333325386047,0],"ti":[0,0,0]},{"i":{"x":1,"y":1},"o":{"x":0.596,"y":0},"n":"1_1_0p596_0","t":50,"s":[24,23.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":58,"s":[24,43.5,0],"e":[24,40.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":61,"s":[24,40.5,0],"e":[24,43.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":64.0000026067734}],"ix":2},"a":{"a":0,"k":[-31,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[17.988,17.988],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2823529411764706,0.29411764705882354,0.3215686274509804,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1.5,-0.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":124.000005050624,"st":0,"bm":0}]}

[pjtnt11]

+1 on this issue

[harishramu]

Any updates ?

[calda]

This is probably related to #1814, where we updated LottieAnimationView to have masksToBounds = true by default. It previously defaulted to false, which caused issues like #1338.

#2008 adds the ability to configure this by setting lottieAnimationView.maskAnimationToBounds = false. I expect that would fix your issue.

[harishramu]

Hello, thank you for the suggestion. I have tested the configuration you suggested using 4.2.0, but the issue still occurs.
I am guessing the cause might not be what you have specified because I noticed this issue occurs in versions after 3.1.6.

[harishramu]

Any updates ? @calda
Can you please reopen the issue ?