Lottie-ios: Paragraph text boxes not rendering in correct place

[JuanG-123]

Check these before submitting:

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

This issue is a:

• [x] Non-Crashing Bug (Visual or otherwise)
• [] Crashing Bug
• [] Feature Request
• [] Regression (Something that once worked, but doesn't work anymore)

Which Version of Lottie are you using?

Lottie 3.1.5 (latest commit on master)

What Platform are you on?

• [] MacOS
• [x] iOS

What Language are you in?

• [x] Swift
• [] Objective-C

Expected Behavior

Paragraph textbox to be rendered in same place it was created in AE

Actual Behavior

Text rendered off to the side.

Code Example

There's nothing special about the way I'm instantiating the animation view. I did however get lldb output for the textLayer at the end of TextCompositionLayer. displayContentsWithFrame

(lldb) po textLayer
<Lottie.DisabledTextLayer:0x12883d520; position = CGPoint (-135 -98); bounds = CGRect (0 0; 270 196); needsDisplayOnBoundsChange = YES; allowsGroupOpacity = YES; alignmentMode = center; string = Testing Paragraph Test1
{
    NSColor = "<CGColor 0x1217ea4a0> [<CGColorSpace 0x125a07250> (kCGColorSpaceDeviceRGB)] ( 0 0 0 1 )";
    NSFont = "<UICTFont: 0x1217c58b0> font-family: \"Helvetica\"; font-weight: normal; font-style: normal; font-size: 49.00pt";
    NSKern = 0;
    NSParagraphStyle = "Alignment 1, LineSpacing 58.8, ParagraphSpacing 0, ParagraphSpacingBefore 0, HeadIndent 0, TailIndent 0, FirstLineHeadIndent 0, LineHeight 0/0, LineHeightMultiple 0, LineBreakMode 0, Tabs (\n    28L,\n    56L,\n    84L,\n    112L,\n    140L,\n    168L,\n    196L,\n    224L,\n    252L,\n    280L,\n    308L,\n    336L\n), DefaultTabInterval 0, Blocks (\n), Lists (\n), BaseWritingDirection -1, HyphenationFactor 0, TighteningForTruncation NO, HeaderLevel 0 LineBreakStrategy 0";
}; anchorPoint = CGPoint (0.5 0.192505); contentsScale = 3; wrapped = 1>

(lldb) po textLayer.frame
▿ (-270.0, -135.73095703125, 270.0, 196.0)
  ▿ origin : (-270.0, -135.73095703125)
    - x : -270.0
    - y : -135.73095703125
  ▿ size : (270.0, 196.0)
    - width : 270.0
    - height : 196.0

(lldb) po self.frame
▿ (0.0, 0.0, 375.0, 666.0)
  ▿ origin : (0.0, 0.0)
    - x : 0.0
    - y : 0.0
  ▿ size : (375.0, 666.0)
    - width : 375.0
    - height : 666.0

Animation JSON

data.json.zip
LottieTest.aep.zip

I made a trivial example that illustrates the issue.

It appears the text box origin is being set to the "ps" property of the text box retrieved from JSON. In all of my testing in AE+bodymovin, that x value is usually a high negative for any paragraph text box, which would lead me to believe that it's in a different coordinate space than the frame it is being used to set.

I'm not certain whether it's an issue with bodymovin, if there's some coordinate translation issue within lottie, or if we're doing something wrong in AE.

Thanks for your time.

[buba447]

Added to my todo

[Rydvansky]

Oh... Yeah. Our project have some trouble with this bug. (

[coreyd303]

Could this be related to the fact that Lottie iOS isn't supporting expressions yet? Any ideas on if this is coming to Lottie soon or what blockers to this feature might be? We are having lots of issues with this . . . cheers :)

[killobatt]

Our project also has some trouble caused by this bug.

[mortenjust]

Same here. Looks like I'm able to fix this by placing the text layer's anchor point in the lower left corner

[BharatBhushan01]

@mortenjust can you please share your code which you used to fix this bug?

[isse]

In lottie-ios 3.1.3 the alignment works ok for us. Falling back to that version can be used as a workaround until there's a fix.

[buba447]

Should be fixed with https://github.com/airbnb/lottie-ios/releases/tag/3.1.7

[buba447]

Correction https://github.com/airbnb/lottie-ios/releases/tag/3.1.8