iOS fullscreen not working correctly

[gultyayev]

Bug report

What steps will reproduce the problem?

1. Create a project (for me it's an Angular + Ionic + Capacitor)
2. Add any lottie animation
3. Set the animation to fullscreen LottieFullScreen: 'true'

Expected output

Animation should display correctly.

What do you see instead?

When the app starts you have a rectangle in the middle of the screen (about half the size of the screen, and most evident on the dark background as the rectangle is white. always. even when you set the background color), and a very small animation in the bottom right corner.

Even when not in fullscreen, the animation is misplaced and the rectangle is there.

Version information

Please provide any additional information below.

Checklist

• If there is a (potential) plugin conflict, I've identified the conflicting plugin
• I have added a valid version output
• I have attached necessary information like a screenshot, example project or videos

[timbru31]

Could you share an example project with me so I can debug this?
Please not that I am not a big fan of Capacitor and it's officially a Cordova plugin

This sounds like #453

[gultyayev]

Commenting out this thing fixes the alignment, but the view is still "small"

    @objc private func deviceOrientationChanged() {
//        animationView?.center = CGPoint(x: UIScreen.main.bounds.midX, y: UIScreen.main.bounds.midY)
    }

Could you share an example project with me so I can debug this? Please not that I am not a big fan of Capacitor and it's officially a Cordova plugin

This sounds like #453

Will do a bit later. I believe it should be very easy to reproduce.

[gultyayev]

Here you go https://github.com/gultyayev/lottie-repro

On the screen & repro it's evident that the background color is ignored and the animation is misplaced as well as incorrectly sized. On Android it works okay.

P.S. I can see warnings about using old AnimationView

I could assist changing those few instances. Unfortunately, it does not fix the bug 🥲

[gultyayev]

Looks like the auto resizing mask is the cause. When I comment it out – the animation is displayed in fullscreen

    private func createAnimationViewContainer() {
        let parentView = viewController.view
        parentView?.isUserInteractionEnabled = false

        animationViewContainer = UIView(frame: (parentView?.bounds)!)
        animationViewContainer?.layer.zPosition = 1

        let backgroundColor = getUIModeDependentPreference(basePreferenceName: "LottieBackgroundColor", defaultValue: "#ffffff")

//        animationViewContainer?.autoresizingMask = [
//            .flexibleWidth, .flexibleHeight, .flexibleTopMargin, .flexibleLeftMargin, .flexibleBottomMargin, .flexibleRightMargin
//        ]
        animationViewContainer?.backgroundColor = UIColor(hex: backgroundColor)
    }

[gultyayev]

I think I found a fix. Will post a PR for your consideration. Perhaps, that will help.

[muhammadosmanali]

hi @gultyayev, I've tried your fix, and it's working well, but it only covers the center part. I want the splash screen to be a bit bigger. Any help would be appreciated.