Skip to content

full page in safari ios, bottom bar hide/visible issue #14

Open
@imagine10255

Description

@imagine10255

What happened?

full page in safari ios, bottom bar hide/visible issue

  • var(--vh100);
  • 100vh;

Relevant log output or stack trace

Steps to reproduce

Fail (absolute)

const generateFadeInFromTopCentered = (formY = 20): TAnimationConfig => {
    return {
        ...defaultVariant,
        variants: {
            initial: {position: 'absolute', left: '50%', top: '50%', opacity: 0, x: '-50%', y: `calc(-50% - ${formY}px)`},
            animate: {opacity: 1, y: '-50%', transition: {type: 'just', duration: .2}},
            exit: {opacity: 0, y: '-50%'},
        },
    };
};

Success (Fixed)

const slideLeftInRight: TAnimationConfig = {
    ...defaultVariant,
    variants: {
        initial: {position: 'fixed', top: 0, bottom: 0, right: 0, translateX: '100%', opacity: .9},
        animate: {translateX: 0, opacity: 1},
        exit: {translateX: '100%', opacity: .9},
    },
    transition: {
        damping: 0,
    }
};

Plugin version

1.1.5

React version

19.1.0

Operating System

None

Link to build, i.e. failing GitHub Action job

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions