Skip to content

Doesn't work as expected with nextJS "Image" component and added "sizes" prop  #211

@michalk91

Description

@michalk91

The animation between the element on the page and the element in the modal. I am using potralKey. When i add prop "sizes" to element on page with value other than "100vw" animation doesn't work on first click in prod mode (in dev mode works fine). After second and every next one click animation works fine. It seems to me that reactflip measures sizes too early. With normal "img" tag it's the same problem. Doesn't work with "sizes" prop. It is possible to do that works with sizes prop? How can i fix that? Thanks for Your help and best regards!

Code: <Flipped onStartImmediate={(e) => ( (e.style.zIndex = "10"), (e.style.position = "relative") )} onComplete={(e) => ((e.style.zIndex = ""), (e.style.position = ""))} flipId={lightboxImgID} > <div onClick={openGallery} className={classNames(imgClassName)}> <Image src={src} alt={alt} height={height ? height : undefined} width={width ? width : undefined} sizes={sizes ? sizes : "100vw"} fill={fillContainer ? true : false} style={{ objectFit: objectFit ? objectFit : "contain" }} /> </div> </Flipped>

NextJS: 13.4.2,
React: 18.2.0,
React-flip-toolkit: 7.1.0.
I use lastest nextImage version

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions