Closed AverTry closed 2 years ago
Do you see the same issue when visiting the demo link? http://linxtion.com/demo/react-image-gallery
I am running into the same issue with vertical thumbnails - it seems to be something related to how scrollHeight
is computed internally.
What is funny is that if I change the vertical size of the browser window, it suddenly starts to work and it only goes back to the bug if I refresh the page.
In ImageGallery.js
there's this logic:
if (this.isThumbnailVertical()) {
if (thumbsElement.scrollHeight <= thumbnailsWrapperHeight) {
return 0;
}
...
Seems like one of those is not correctly computed (it's not returning 0) before the browser window height is being changed, for some weird reason.
Will try to create a codepen replicating the issue.
Looks like this is a duplicate of #674 and happening for react >= 18 when a new render was introduced.
Duplicate of #674
Closing in favor of #674
Describe the bug A clear and concise description of what the bug is.
Using your example:
In normal view click on third image, now go Fullscreen, and this happens:
Image Gallery Version What version of
react-image-gallery
are you using?"react-image-gallery": "^1.2.8"
To Reproduce Steps to reproduce the behavior: See above:
Expected behavior A clear and concise description of what you expected to happen. Stay Centered
Screenshots If applicable, add screenshots to help explain your problem.
See Above:
Desktop (please complete the following information):
Windows 11 Pro: Chrome Engine based browsers - Brave, Opera, Edge "dependencies": { "next": "12.2.0", "react": "18.2.0", "react-dom": "18.2.0", "react-image-gallery": "^1.2.8" }, "devDependencies": { "eslint": "8.18.0", "eslint-config-next": "12.2.0", "gray-matter": "^4.0.3", "next-mdx-remote": "^4.0.3", "remark-gfm": "^3.0.1" }
Additional context Add any other context about the problem here.
My quick hack fix that will most likely fail on a large gallery is css to force it to be centered.
/ Bug fix hack, fullscreen disapearing nav / .image-gallery-thumbnails-container { transform: translate3d(0px, 0px, 0px) !important; }