Most likely this is caused by the automatic hiding of the scrollbars when opening the lightbox. You can disable this behaviour in the general settings at “Other Options”, see “Hide scrollbars when opening the lightbox”. Then the scrollbar will not be hidden when opening the lightbox, but the content should stay as it is.
Usually this works fine, but some themes may have an issue with that since they update the layout when the viewport size changes while hiding or showing the scrollbar.
Thank you for your incredibly fast response, Arno. I just disabled the setting, so now the scrollbar no longer hides. However, this doesn’t seem to be the source of the issue, as it still persists.
Sorry, then I don’t know what the issue is here. However, it seems, the effect can be reproduced on my demo site when opening the first image without scrolling down first:
https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/
But as soon as you scroll down a bit, the “jump” does not happen any longer. This also applies to your site as well – so maybe this is a bug in Photoswipe 5 itself.
I have to do a more thorough research what is going on here.
Dear Arno. Thank you, again!
I just tried it again a couple of times, and it does seem appear the most when you haven’t scrolled yet. However, I’m also getting the same issue after scrolling with images lower in the content. It doesn’t seem to always happen, so I’m not completely sure what the trigger is.
Thank you for looking into this!
Unfortunately I did not find any specific reason for this behaviour. However, it seems this is only affects Chromium based browsers. With Firefox this does not happen at all. I also see, that in Chrome even in the code in the web developer console jumps up and down in some situations. So this may be a bug of Chromium as well.
The source of my plugin is available at https://github.com/arnowelzel/lightbox-photoswipe.
I also created a Github issue: https://github.com/arnowelzel/lightbox-photoswipe/issues/107
Maybe anyone else has an idea how to fix this – help is always appreciated!
You’re totally right that it only happens on Chromium browsers. Again, thank you for taking the time to look into this.
Some more research:
It seems, the reason for this behaviour is, that on Chromium based browsers the view will scroll down or up when clicking an image, to make sure, the image is fully inside the viewport. However when fragment navigation is enabled, the original URL will be restored when the lighbox closed which will trigger the browser to scroll back to the original position.
However this happens also with PhotoSwipe 4 but not in Firefox, I assume this is a very weird bug in Chromium which can not be mitigated in Photoswipe – since the scrolling is not done by PhotoSwipe. It also does not matter how the image is inserted into the page. I verified this with Gutenberg, plain HTML, single images, Meow Gallery – the behaviour is always the same.
To reproduce:
- Disable fragment navigation (Uncheck “Update browser history” in the General settings of Lightbox with PhotoSwipe) – just keep in mind, that this will also change the behaviour of the lightbox, so you can not go “back” in the browser any longer to close it.
- Click on any image which is not fully inside the current viewport and then close the lightbox again – and then see, that the browser scrolled up or down just enough to make sure, that the image is inside the viewport.
I will continue looking into this, if there as any workaround possible – but so far I have no idea how to cope with this.
Thanks, Arno! I experimented with turning off “Update browser history,” and as you mentioned, it does clearly shows how Chromium scrolls to the top after the Lightbox is closed.
I wonder if disabling history.scrollRestoration could work? Something like:
document.addEventListener('pswpOpen', () => {
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
});
document.addEventListener('pswpClose', () => {
if ('scrollRestoration' in history) {
history.scrollRestoration = 'auto';
}
});
-
This reply was modified 1 year, 1 month ago by
raoul_k.
Good finding!
One issue is, that scroll itself will not prevented – just the restore. So as soon as you click the image, the browser will scroll to make sure, it will be completely inside the viewport. But I will check, if I the supposed changes help to keep the scroll position at least where it is after clicking the image.
As expected – the browser will not scroll back when the lightbox closes. But the first scroll caused by clicking an image will still happen. This will even happen if you just go through the page using the [Tab] key – as soon as the image gets the focus, the browser will scroll to make sure it is insied the viewport.
I hope I finally found a solution. Please update to version 5.7.0 when it is available and check again with enabled browser history. The “jump” effect should not appear any longer.
Also see here: https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/
When an image was partly outside the viewport, the view jumped up and down again when closing the lightbox. This should not happen any more.
Wow, you did it! 👏 Thanks so much for fixing this.
