Fullscreen thumbs go offscreen

[AverTry]

Describe the bug A clear and concise description of what the bug is.

Using your example:

import ImageGallery from 'react-image-gallery';

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];

class MyGallery extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

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):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

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; }

[xiaolin]

Do you see the same issue when visiting the demo link? http://linxtion.com/demo/react-image-gallery

[alexdevmotion]

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.

[xiaolin]

Looks like this is a duplicate of #674 and happening for react >= 18 when a new render was introduced.

[xiaolin]

Duplicate of #674

[xiaolin]

Closing in favor of #674