Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
michalk91 opened this issue May 29, 2023 · 0 comments

Comments

@michalk91
Copy link

michalk91 commented May 29, 2023

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

@michalk91 michalk91 changed the title Doesn't work with nextJS "Image" component and added "sizes" prop Doesn't work as expected with nextJS "Image" component and added "sizes" prop May 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant