Pjax module does not work well when using fancybox at the same time

[Mister-Kin]

Issue Checklist

• I am using NexT version 8.0 or later.
• I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
• I have already searched for current issues, which does not help me.

Expected behavior

With both fancybox and pjax enabled, after using fancybox to view an image and then exiting, the page scrollbar stays in its original state and does not cause refresh.

Actual behavior

case1.mp4

• Issue Case 1: Scrolling through the post without clicking on any anchors of toc, then exits after using the fancybox to view images.
  • The scroll bar is reset to its initial state. (at the 9th second of the video, see the video case1.mp4).
  • The page is refreshed. (at the 14th second of the video, see the video case1.mp4).

case2.mp4

• Issue Case 2: Jumping from another post to a specific anchor of an article in the site, and then using the fancybox to view the image and then exiting, also causes the scrollbar to be reset to its initial state, even if the browser's URL is to the anchor of the page. (see the video case2.mp4)

normal.mp4

• The only normal case: Manually clicking the anchor of toc, and then using fancybox to view the image and then exiting which does not cause any issues. (see the video normal.mp4)

Steps to reproduce the behavior

With both fancybox and pjax enabled in _config.next.yml.

After disabling pjax in _config.next.yml, the page renders fine even with fancybox.

Node.js and NPM Information

node.js: v20.18.0 & v22.17.0
npm: v10.8.2
yarn: v1.22.22

Package dependencies Information

hexo-site@0.0.0 D:\git\testNext
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@4.0.0
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@7.0.1
├── hexo-renderer-stylus@3.0.1
├── hexo-server@3.0.0
├── hexo-theme-next@8.24.0
└── hexo@7.3.0

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

NexT Configuration

scheme: Gemini
pjax: true
fancybox: true

Other Information

• OS: Microsoft Windows 11 Pro (64-bit) v24H2, 26100.4770
• Google Chrome：v139.0.7258.67
• Microsoft Edge：v139.0.3405.86
• Firefox Browser：v141.0.3

[stevenjoezhang]

Thanks for the feedback. The issue you encountered seems similar to this: #773
Could you help confirm whether this problem was introduced by a newer version of Fancybox? If you downgrade to an older version, does it work normally again? Many thanks!

[Mister-Kin]

Thanks for the feedback. The issue you encountered seems similar to this: #773 Could you help confirm whether this problem was introduced by a newer version of Fancybox? If you downgrade to an older version, does it work normally again? Many thanks!

I will test the older version later.

[Mister-Kin]

After several test samples, I found no working version in the Fancybox 6.0.x series for now — I suspect all of them have this issue. I also tested versions 5.0.31 to 5.0.36

Here are the test results:

• 6.0.22: same issue as 6.0.17
• 6.0.21: same issue as 6.0.17
• 6.0.17: which is used in NexT 8.24.0
• 6.0.13: same issue as 6.0.17
• 6.0.9: same issue as 6.0.17
• 6.0.4: same issue as 6.0.17
• 6.0.0: same issue as 6.0.17
• 5.0.36: cause a refresh
• 5.0.35: cause a refresh
• 5.0.34: same issue as 6.0.17
• 5.0.33: same issue as 6.0.17
• 5.0.32: same issue as 6.0.17
• 5.0.31: the only version which works well.

This issue has resurfaced starting from version 6.0.0. Even versions 5.0.36 and 5.0.35 still have a minor issue that causes the page to refresh, though it does not reset the scrollbar position.

I think it's better to stick with @fancyapps/ui@5.0.31 for NexT.

The following are test videos:

6.0.0-test.mp4

5.0.36-test.mp4

5.0.31-test.mp4

[Mister-Kin]

Additionally, I've discovered another weird issue with pjax.

When pjax is enabled, the first navigation from one post to an anchor point in another post does not scroll to the correct position. This issue occurs regardless of whether fancybox is enabled.

Please refer to the following video timestamps for details (see the video weird_issue_pjax.mp4):

• 0:08–0:12: After running hexo clean && hexo generate && hexo server, the first click on an anchor link results in incorrect anchor positioning.
• 0:13–0:18: After returning to the homepage and clicking the same link again, the anchor scrolls correctly.
• 0:21–0:28: After returning to the homepage, refreshing the page with F5, and clicking the link a third time, the anchor positioning fails again.

_config.next.yml:

scheme: Gemini
pjax: true

Are these behaviors considered normal for the pjax module?

weird_issue_pjax.mp4

[stevenjoezhang]

I applied a temporary solution by downgrading @fancyapps/ui to version 5.0.31. Since we're currently using our forked version of pjax, I'll continue investigating and work on fixing the pjax issue in the future. Thanks for your experiments!