Nativescript 5 angular animation affecting margin and padding of the inner component

[gogoout]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: playground
• Cross-platform modules: "tns-core-modules": "5.0.1"
• iOS Runtime: 5.0.0
• NativeScript-Angular: 6.2.0 also 7.0.2
• Angular: 6.1.10 aslo 7.0.0

Describe the bug
It seems when having a transform animation changes on left/top. The padding/margin is cut off from the inner component.

To Reproduce

• Open the app
• Click Toggle button
• See the left padding/margin gets cut off

Expected behavior
The left padding/margin should be there

Sample project
https://play.nativescript.org/?template=play-ng&id=5Wu3ZR&v=5

[tsonevn]

Hi, @gogoout,
Thank you for the provided sample project. I was able to recreate the issue for iOS. We will investigate further the case and will check what is causing the problem.

[alexxxo1985]

Hi @tsonevn ! Any updates on this?

[YoussefGheith]

+1

[gogoout]

I have done some more testings on this issue.
https://play.nativescript.org/?template=play-ng&id=or2KMG&v=5
So this bug is not caused by angular animation system. Indeed, it is caused by the introducing of the safe area layout process in ios.

https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/core/view/view.ios.ts

@profile
    public layout(left: number, top: number, right: number, bottom: number, setFrame = true): void {
        const { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
        if (setFrame) {
            this.layoutNativeView(left, top, right, bottom);
        }

        if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
            let position = { left, top, right, bottom };
            if (this.nativeViewProtected && majorVersion > 10) {
                // on iOS 11+ it is possible to have a changed layout frame due to safe area insets
                // get the frame and adjust the position, so that onLayout works correctly
                const frame = this.nativeViewProtected.frame;
                position = ios.getPositionFromFrame(frame);
            }

            this.onLayout(position.left, position.top, position.right, position.bottom);
            this._privateFlags &= ~PFLAG_LAYOUT_REQUIRED;
        }

        this.updateBackground(sizeChanged);
        this._privateFlags &= ~PFLAG_FORCE_LAYOUT;
    }

In here, if the View inited outside the screen, the position return by position = ios.getPositionFromFrame(frame); will reset the position to 0. Which cut the padding and margin of the View. Which means the cut off padding margin is happening in the period of entering animation

The workaround for this issue is to set the offset within the range of the margin or padding. (For this playground project, set the transition x within -20 will solve the issue).

Also I think this bug should be moved to the core nativescript repo.