There is an issue with the Hash behavior in version v5.0.36.

[Container-Zero]

trafficstars

Describe the bug

There is an issue with the Hash behavior in version v5.0.36.

Steps to reproduce:

1. Open the website: https://v5.fancyapps.com/fancybox/
2. Scroll down to the Combine section and open any image.
3. Once the image is fully opened, directly click the browser’s back navigation button.
4. The image will close. Next, open any image again in the Combine section.
5. Close the image using the Fancybox close button.

At this point, the page unexpectedly navigates up one level, instead of simply closing the current image. This behavior appears to be related to Fancybox's internal navigation handling, and I suspect it is caused by the fix discussed in https://github.com/fancyapps/ui/issues/264.

Problems observed:

1. After clicking the browser's back navigation button and then opening another image, no new history entry is added to the browser history. However, when closing this image normally, history.back() is triggered.
2. Suppose that after "clicking the browser's back navigation button and then opening another image," I manually execute window.history.pushState({}, '', window.location.href);—this can offset the history.back() triggered when closing the image, preventing the page from navigating back. However, if I continue to open another image, no new history entry is added, and closing the image also does not trigger history.back(). This is quite confusing.

Expected result: Even if the user navigates back using the browser's back button, each subsequent image opened should reliably add a new entry to the browser history, and closing the image should correctly revert only the most recent entry.

I am aware that your current development focus is on v6, but v5 remains extremely important for me. I have deeply integrated it into my web gallery projects, resolved most hidden issues, and implemented my own performance optimizations. Adopting the rearchitected v6 would present me with many new challenges, the need for refactoring, and potential risks. For a long time, v5 has been remarkably stable, and the issue described above is the only new problem I've recently discovered. I sincerely hope you can provide a solution. Thank you for your efforts.

[Container-Zero]

Additionally, I’ve discovered another issue:

When an image is opened, if you refresh the browser (or press F5), the hash value remains in the browser’s address bar, which is expected. However, the problem is as follows—after opening an image, the hash updates to the new image’s hash. But if you then close the image, the hash in the address bar is not cleared; instead, it reverts to the hash from before the refresh.

Steps to reproduce:

1. Visit the website: https://v5.fancyapps.com/fancybox/
2. Scroll down to the Combine section and click the first image.
3. Once the image is fully open, directly click the browser’s refresh button.
4. After the page reloads, an image will automatically open. Close this image, and you’ll see that the hash value in the browser’s address bar still remains as the previous hash. Then, scroll down to Combine and open a different image (not the one opened initially).
5. The hash in the address bar will update to the newly opened image’s hash. However, after closing the image using the Fancybox close button, the hash value is not cleared.

[Container-Zero]

I have reverted to my previously used version, v5.0.31. In this version, issue 2 no longer occurs, and issue 1 can seemingly be resolved using the following approach:

(function() {
    const rawPushState = history.pushState;
    history.pushState = function(...args) {
        window.dispatchEvent(new Event('pushstate'));
        return rawPushState.apply(this, args);
    };
    window.addEventListener('pushstate', function() {
        window.fancyboxNeedHistoryBack = true;
    });
})();

on: {
    "init": (event) => {
        window.fancyboxNeedHistoryBack = false
    },
    "close": (event) => {
        if (window.fancyboxNeedHistoryBack) {
            window.history.back()
        }
    },
    // ...
}

The above code was inspired by the comment at https://github.com/fancyapps/ui/issues/264#issuecomment-1857580474.

[fancyapps]

Sorry, but there are no plans to make any updates to v5. Also, it is impossible to make hash navigation work perfectly in all scenarios, because there is no way to directly detect when a user presses the browser's back button or a physical button on the device, and there is no way to know what the history entries contain and cannot remove them.

The hash plugin was rewritten in version 6 and works a little better, so try upgrading. If you need help, join the Discord server.