You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
NextJS: 13.4.2,
React: 18.2.0,
React-flip-toolkit: 7.1.0.
I use lastest nextImage version
The text was updated successfully, but these errors were encountered:
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
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
The text was updated successfully, but these errors were encountered: