Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

animation.js causes URLs with hash to jump to wrong position #1115

Closed
ppwwyyxx opened this issue Sep 12, 2022 · 0 comments
Closed

animation.js causes URLs with hash to jump to wrong position #1115

ppwwyyxx opened this issue Sep 12, 2022 · 0 comments
Labels
bug:extension Issues about widgets, comment, share, search, and plugins.

Comments

@ppwwyyxx
Copy link
Contributor

Describe the bug
When I uses a url with hash, e.g. blog.com/article/#title (generated by https://github.com/hexojs/hexo-renderer-markdown-it/#automatic-headline-ids) , I expect browser to open the link and jump to a position where the title is at top of the page. But the actual position is not.

System and Environment
The version and configuration of Hexo and Icarus.

  • Hexo, OS, and node version (use hexo version command to view these information): hexo-cli: 4.3.0; os: linux 5.15.64-1-lts Arch Linux; node: 14.20.0
  • Site configuration file _config.yml
  • Theme configuration file _config.icarus.yml or themes/icarus/_config.yml
  • Any additional theme configuration files (post front-matter, _config.post.yml, or _config.page.yml)
  • Browser and version (e.g., Firefox 70.0, Chrome Android 80.0): Chrome 105.0.5195.102

To Reproduce
Steps to reproduce the behavior, such as:

  1. Open an incognito chrome window
  2. Paste https://ppoffice.github.io/hexo-theme-icarus/uncategorized/%E8%87%AA%E5%AE%9A%E4%B9%89hexo%E6%A0%87%E7%AD%BE%E6%8F%92%E4%BB%B6/#icon-1 in the new tab and press enter.

The position of the opened page sometimes does not end up at the desired hash position (though sometimes it works).
It's easier to reproduce if I scroll up and down the opened page a little bit, open a new tab, paste URL, and press enter again.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
2022-09-11_18-08

Additional context
I found that animation.js may have caused this issue. I made the following change on my own website:

diff --git c/source/js/animation.js w/source/js/animation.js
index 50c7c3f..064cfd9 100644
--- c/source/js/animation.js
+++ w/source/js/animation.js
@@ -16,8 +16,12 @@
         $(selector).forEach(element => {
             element.style.transition = '0s';
             element.style.opacity = '0';
-            element.style.transform = 'scale(0.8)';
-            element.style.transformOrigin = 'center top';
+            if (!window.location.hash) {
+              element.style.transform = 'scale(0.8)';
+              element.style.transformOrigin = 'center top';
+            }
         });
     });
     setTimeout(() => {

Then I can get the expected behavior. However I don't understand the root cause.

@ppoffice ppoffice added the bug:extension Issues about widgets, comment, share, search, and plugins. label Sep 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug:extension Issues about widgets, comment, share, search, and plugins.
Projects
None yet
Development

No branches or pull requests

2 participants