Skip to content

Lottie animation missing border on iOS Xcode but working perfect on Android. #1535

Closed
@fangjinfeng

Description

@fangjinfeng

Check these before submitting:

  • [] The issue doesn't involve an Unsupported Feature
  • [] This issue isn't related to another open issue

This issue is a:

  • [] Non-Crashing Bug (Visual or otherwise)

Which Version of Lottie are you using?

Lottie 3.3.0

What Platform are you on?

  • [] iOS

What Language are you in?

  • [] Swift

Expected Behavior

back_address_animation_expect

Actual Behavior

back_address_animation_actual

Code Example

let animation = AnimationView(name: "address_animation")
animation.loopMode = .loop
animation.backgroundBehavior = .pauseAndRestore
return animation

Animation JSON

{"v":"5.6.10","fr":60,"ip":0,"op":140,"w":1031,"h":172,"nm":"NewUser","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ShapeLayer 6","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":8}},"s":{"a":0,"k":[-252.939,-0.045],"ix":4},"e":{"a":0,"k":[323.944,3.109],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"RectangleStroke1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Plan6","tt":1,"sr":1,"ks":{"o":{"a":0,"k":70,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":70,"s":[515,85.844,0],"to":[45.788,0,0],"ti":[-139.546,0,0]},{"t":140,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,0.11,0.831,0.82,0.125,0.416,0.806,0.91,0.25,0.722,0.78,1,0.375,0.861,0.525,0.663,0.499,1,0.271,0.325,0.625,0.861,0.525,0.663,0.75,0.722,0.78,1,0.875,0.416,0.806,0.91,1,0.11,0.831,0.82],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"ShapeLayer 8","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}},"s":{"a":0,"k":[-394.409,1.224],"ix":5},"e":{"a":0,"k":[399.407,-4.418],"ix":6},"t":1,"nm":"GradientFill1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Plan8","tt":1,"sr":1,"ks":{"o":{"a":0,"k":6,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":70,"s":[515,85.844,0],"to":[185.333,0,0],"ti":[-185.333,0,0]},{"t":140,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,0.11,0.831,0.82,0.125,0.416,0.806,0.91,0.25,0.722,0.78,1,0.375,0.861,0.525,0.663,0.5,1,0.271,0.325,0.625,0.861,0.525,0.663,0.75,0.722,0.78,1,0.875,0.416,0.806,0.91,1,0.11,0.831,0.82],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient3","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"ShapeLayer 5","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":8}},"s":{"a":0,"k":[-252.939,-0.045],"ix":4},"e":{"a":0,"k":[323.944,3.109],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"GradientStroke1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Plan5","tt":1,"sr":1,"ks":{"o":{"a":0,"k":70,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[515,85.844,0],"to":[185.333,0,0],"ti":[-185.333,0,0]},{"t":70,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,1,0.271,0.325,0.125,0.861,0.525,0.663,0.25,0.722,0.78,1,0.375,0.416,0.806,0.91,0.5,0.11,0.831,0.82,0.625,0.416,0.806,0.91,0.75,0.722,0.78,1,0.875,0.861,0.525,0.663,1,1,0.271,0.325],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient2","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"ShapeLayer 7","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}},"s":{"a":0,"k":[-394.409,1.224],"ix":5},"e":{"a":0,"k":[399.407,-4.418],"ix":6},"t":1,"nm":"GradientFill1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Plan7","tt":1,"sr":1,"ks":{"o":{"a":0,"k":6,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[515,85.844,0],"to":[185.333,0,0],"ti":[-185.333,0,0]},{"t":70,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,1,0.271,0.325,0.125,0.861,0.525,0.663,0.25,0.722,0.78,1,0.375,0.416,0.806,0.91,0.5,0.11,0.831,0.82,0.625,0.416,0.806,0.91,0.75,0.722,0.78,1,0.875,0.861,0.525,0.663,1,1,0.271,0.325],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient4","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,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":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0}],"markers":[]}

Activity

calda

calda commented on Aug 3, 2022

@calda
Member

This animation appears to render correctly when I use the new Core Animation rendering engine in 3.4.0+. If you update and enable the new engine, this animation should play as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @calda@fangjinfeng

        Issue actions

          Lottie animation missing border on iOS Xcode but working perfect on Android. · Issue #1535 · airbnb/lottie-ios