Unexpected horizon scroll bar under MathJax equations, after upgraded to 7.0.1

[Liam0205]

I agree and want to create new issue

• Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
• Yes, I was on NexT Documentation Site.
• And yes, I already searched for current issues and this is not help to me.

---

Expected behavior

When posting display MathJax equations, there is no horizon scroll bar under equations.

Actual behavior

There are unexpected horizon scroll bar under equations.

Steps to reproduce the behavior

1. Active MathJax in NexT;
2. Publish a post with display MathJax equations.

• Link to demo site with this bug: https://liam.page/2018/04/17/zero-centered-active-function/
• Link(s) to source code or any usefull link(s): N/A

Node.js and NPM Information

$ node -v && npm -v
v10.13.0
6.4.1

Package dependencies Information

$ cat package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "dependencies": {
    "dtrace-provider": "^0.8.7",
    "hexo": "^3.8.0",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-searchdb": "^1.0.8",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.1",
    "hexo-symbols-count-time": "^0.4.4"
  }
}

Hexo Information

Hexo version

$ hexo -v
hexo: 3.8.0
hexo-cli: 1.1.0
os: Windows_NT 6.1.7601 win32 x64
http_parser: 2.8.0
node: 10.13.0
v8: 6.8.275.32-node.36
uv: 1.23.2
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0i
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

Hexo Configuration

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

# Site
title: 始终
subtitle: 不忘初心
description: 不忘初心，方得始终。
keywords: Artificial Intelligence, Machine Learning, Mathematics, C++, C, Python, TeX, LaTeX, CTeX
author: Liam Huang
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://liam.page
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# 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: :year/:month/:day/:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  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: 5
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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

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

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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:
    github: git@github.com:Liam0205/liam0205.github.io.git,master

server:
  ip: 0.0.0.0
  port: 9225

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

NexT Information

NexT Version:

• Latest Master branch
• Latest Release version
• Old version

NexT Scheme:

• All schemes
• Muse
• Mist
• Pisces
• Gemini

NexT Configuration:

$ diff _config.yml ../../source/_data/next.yml
48,53c48,53
<   small: /images/favicon-16x16-next.png
<   medium: /images/favicon-32x32-next.png
<   apple_touch_icon: /images/apple-touch-icon-next.png
<   safari_pinned_tab: /images/logo.svg
<   #android_manifest: /images/manifest.json
<   #ms_browserconfig: /images/browserconfig.xml
---
>   small: /images/favicon/favicon-16x16.png
>   medium: /images/favicon/favicon-32x32.png
>   apple_touch_icon: /images/favicon/apple-touch-icon.png
>   safari_pinned_tab: /images/favicon/safari-pinned-tab.svg
>   android_manifest: /images/favicon/site.webmanifest
>   ms_browserconfig: /images/favicon/browserconfig.xml
63c63
<   #since: 2015
---
>   since: 2013
108,110c108,110
<   sidebar: false
<   post: false
<   language:
---
>   sidebar: true
>   post: true
>   language: deed.zh
122,123c122,123
< # Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
< seo: false
---
> # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
> seo: true
139c139
< # Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
---
> # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
145,147d144
<   #about: /about/ || user
<   #tags: /tags/ || tags
<   #categories: /categories/ || th
148a146,150
>   categories: /categories/ || th
>   tags: /tags/ || tags
>   系列: /series || book
>   札记 & 留言板: /notes/ || sticky-note
>   英文: /en || link
149a152
>   about: /about/ || user
156c159
<   badges: false
---
>   badges: true
164c167
< scheme: Muse
---
> #scheme: Muse
167c170
< #scheme: Gemini
---
> scheme: Gemini
182c185
< social:
---
> #social:
208,210c211,213
< links_title: Links
< links_layout: block
< #links_layout: inline
---
> links_title: 友情链接
> #links_layout: block
> links_layout: inline
212c215,226
<   #Title: http://example.com
---
>   Anyi: https://anyi.im/
>   Giraffe: http://yemengying.com/
>   # JellyThink: http://www.jellythink.com/
>   Jiayu: http://jiayu.lu/
>   # KangLu: http://lukang.me/
>   XinboQi: http://qixinbo.info/
>   AhengXu: http://www.shuang0420.com
>   Chengjin: http://chengjin.li
>   FuZihao: http://www.fuzihao.org
>   ChenLinjie: https://ionizing.science/
>   Yihui: https://yihui.name/
>   Felix: https://blog.felixc.at/
216,217c230,231
<   # In theme directory (source/images): /images/avatar.gif
<   # In site directory (source/uploads): /uploads/avatar.gif
---
>   # in theme directory(source/images): /images/avatar.gif
>   # in site  directory(source/uploads): /uploads/avatar.gif
219c233
<   url: #/images/avatar.gif
---
>   url: /images/avatar/avatar.webp
234c248
<   # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front Matter.
---
>   # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
242c256,257
<   # Manual define the sidebar width. If commented, will be default for:
---
>   # Manual define the sidebar width.
>   # If commented, will be default for:
249c264
<   #  - always  expand for all pages automatically.
---
>   #  - always  expand for all pages automatically
251c266
<   #  - remove  totally remove sidebar including sidebar toggle.
---
>   #  - remove  Totally remove sidebar including sidebar toggle.
252a268,270
>   #display: always
>   #display: hide
>   #display: remove
257c275
<   b2t: false
---
>   b2t: true
259c277
<   scrollpercent: false
---
>   scrollpercent: true
273c291
< # Automatically saving scroll position on each post / page in cookies.
---
> # Automatically saving scroll position on each post/page in cookies.
307c325
<   awl: 4
---
>   awl: 2
316c334
<     enable: false
---
>     enable: true
323c341
< wechat_subscriber:
---
> #wechat_subscriber:
330c348
< # You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
---
> # And you can show or hide one article specially through add page variable `reward: true/false`.
332,336c350,356
<   enable: false
<   #comment: Donate comment here
<   #wechatpay: /images/wechatpay.jpg
<   #alipay: /images/alipay.jpg
<   #bitcoin: /images/bitcoin.jpg
---
>   enable: true
>   comment: 俗话说，投资效率是最好的投资。 如果您感觉我的文章质量不错，读后收获很大，预计能为您提高 10% 的工作效率，不妨小额捐助我一下，让我有动力继续写出更多好文章。
>   wechatpay: /images/reward/wechatpay-cropped.png
>   alipay: /images/reward/alipay-cropped.png
>   paypal_id: 3EKTTVF2FF5EQ
>   paypal_img: /images/reward/paypal-btn_donateCC_LG.gif
>   #bitcoin: /images/reward/bitcoin.jpg
376c396
< #   image: Images's url, e.g. /uploads/custom-logo.jpg
---
> #   image: Images's url, replace it with specific image
391,395c411,416
< # Font Settings. Introduced in NexT v5.0.1.
< # Find fonts on Google Fonts (https://www.google.com/fonts)
< # All fonts set here will have the following styles:
< #   light, light italic, normal, normal italic, bold, bold italic
< # Be aware that setting too much fonts will cause site running slowly
---
> # Font Settings
> # - Find fonts on Google Fonts (https://www.google.com/fonts)
> # - All fonts set here will have the following styles:
> #     light, light italic, normal, normal italic, bold, bold italic
> # - Be aware that setting too much fonts will cause site running slowly
> # - Introduce in 5.0.1
397c418,419
< # To avoid space between header and sidebar in scheme Pisces / Gemini, Web Safe fonts are recommended for `global` (and `logo`):
---
> # CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844
> # To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`):
403c425
<   # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
---
>   # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
450c472
<   enable: false
---
>   enable: true
452,454c474,476
<   # Default (true) will load mathjax / katex script on demand.
<   # That is it only render those page which has `mathjax: true` in Front Matter.
<   # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
---
>   # Default(true) will load mathjax/katex script on demand
>   # That is it only render those page who has `mathjax: true` in Front Matter.
>   # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
489,491c511,513
<   # Default (true) will load PDFObject / PDF.js script on demand.
<   # That is it only render those page which has `pdf: true` in Front Matter.
<   # If you set it to false, it will load PDFObject / PDF.js srcipt EVERY PAGE.
---
>   # Default(true) will load PDFObject/PDF.js script on demand
>   # That is it only render those page who has `pdf: true` in Front Matter.
>   # If you set it to false, it will load PDFObject/PDF.js srcipt EVERY PAGE.
543c565
< # Changyan
---
> # changyan
565c587
< # LiveRe comments system
---
> # Support for LiveRe comments system.
575,576c597,598
<   lazy: false # Comments lazy loading with a button
<   cleanly: false # Hide 'Powered by ...' on footer, and more
---
>   lazy: true # Comments lazy loading with a button
>   cleanly: true # Hide 'Powered by ...' on footer, and more
578,581c600,603
<   github_user: # MUST HAVE, Your Github Username
<   github_repo: # MUST HAVE, The name of the repo you use to store Gitment comments
<   client_id: # MUST HAVE, Github client id for the Gitment
<   client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
---
>   github_user: Liam0205 # MUST HAVE, Your Github Username
>   github_repo: liam0205.github.io # MUST HAVE, The name of the repo you use to store Gitment comments
>   client_id: N/A # MUST HAVE, Github client id for the Gitment
>   client_secret: N/A # EITHER this or proxy_gateway, Github access secret token for the Gitment
587c609
< # Reference: https://asdfv1929.github.io/2018/01/20/gitalk/, https://liujunzhou.top/2018/8/10/gitalk-error/
---
> # Reference: https://asdfv1929.github.io/2018/01/20/gitalk/, https://liujunzhou.cn/2018/8/10/gitalk-error/#more
589,594c611,616
<   enable: false
<   github_id:  # Github repo owner
<   repo:  # Repository name to store issues.
<   client_id:  # Github Application Client ID
<   client_secret:  # Github Application Client Secret
<   admin_user:  # GitHub repo owner and collaborators, only these guys can initialize github issues
---
>   enable: true
>   github_id: Liam0205 # Github repo owner
>   repo: liam0205.github.io # Repository name to store issues.
>   client_id: N/A # Github Application Client ID
>   client_secret: N/A # Github Application Client Secret
>   admin_user: Liam0205 # GitHub repo owner and collaborators, only these guys can initialize github issues
595a618
>   language: zh-CN # [en, zh-CN, zh-TW]
598c621,622
< # Available values: button | slide
---
> # Available values:
> #    button | slide
603,604c627
< # AddThis Share, See: https://www.addthis.com
< # Go to https://www.addthis.com/dashboard to customize your tools.
---
> # addthis Share, see: https://www.addthis.com
617c640
<   enable: false
---
>   enable: true
619c642
<     enable: false
---
>     enable: true
621c644
<       iconStyle: box
---
>       iconStyle: default
623,624c646,647
<       position: bottomCenter
<       networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
---
>       position: topCenter
>       networks: Wechat,Weibo,renren,Twitter,Facebook,GooglePlus,Douban,QQZone,Evernote,Mailto
635c658
< #google_site_verification:
---
> google_site_verification: N/A
638,640c661,663
< # google_analytics:
< #   tracking_id:
< #   localhost_ignored: true
---
> google_analytics:
>   tracking_id: N/A
>   localhost_ignored: true
699c722
< # You can visit https://leancloud.cn to get AppID and AppKey.
---
> # You can visit https://leancloud.cn get AppID and AppKey.
720c743
< # Show Views / Visitors of the website / page with busuanzi.
---
> # Show Views/Visitors of the website/page with busuanzi.
723,724c746,747
<   enable: false
<   total_visitors: true
---
>   enable: true
>   total_visitors: false
729a753,756
>   adjustment:
>     enable: true
>     offset_total_visitors: 50000
>     offset_total_views: 100000
743c770,771
< # To get api_key: https://console.developers.google.com
---
> # Enabled APIs and services
> # api_key: https://console.developers.google.com
771,773c799,801
<   enable: false
<   # If auto, trigger search by changing input.
<   # If manual, trigger search by pressing enter key or search button.
---
>   enable: true
>   # if auto, trigger search by changing input
>   # if manual, trigger search by pressing enter key or search button
775c803
<   # Show top n results per article, show all results by setting to -1
---
>   # show top n results per article, show all results by setting to -1
777c805
<   # Unescape html strings to the readable one.
---
>   # unescape html strings to the readable one
784,785c812,815
<   # If auto, save the reading position when closing the page or clicking the bookmark-icon.
<   # If manual, only save it by clicking the bookmark-icon.
---
>   # if auto
>   #   - save the reading position when closing the page
>   #   - or clicking the bookmark-icon
>   # if manual, only save it by clicking the bookmark-icon
788,793c818,822
< # Reading progress bar
< # Dependencies: https://github.com/theme-next/theme-next-reading-progress
< reading_progress:
<   enable: false
<   color: "#37c6c0"
<   height: 2px
---
> crash_title_cheat:
>   enable: true
>   probability: 0.25
>   crash_string: ╭(°A°`)╮ 页面崩溃啦~
>   recover_string: (ฅ>ω<*ฅ) 咦，又好了~
794a824,827
> april_fool:
>   enable: true
>   time: 6000
>   string: 恭喜发现愚人节彩蛋，确认后页面将恢复正常。——Liam Huang (Yuuki)
825a859,865
> # Reading progress bar
> # Dependencies: https://github.com/theme-next/theme-next-reading-progress
> reading_progress:
>   enable: false
>   color: "#37c6c0"
>   height: 2px
>
871a912,913
> # For example
> # pace_theme: pace-theme-center-simple
907c949
< #   jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
---
> #    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
945c987
<   # See: http://velocityjs.org
---
>   # See: http://VelocityJS.org
1049c1091
<   # reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1/reading_progress.min.js
---
>   # reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.1/reading_progress.min.js

Other Information

Tested environments:

• Windows 7, Chrome 72.0.3626.119
• Windows 7, Chrome 72.0.3626.121

[stevenjoezhang]

Are you using Edge?

[Liam0205]

Nope, I'm using Chrome.

[stevenjoezhang]

Chrome on Windows or macOS or Linux?

It seems fine on my Mac.
Horizon scroll bar should only appear when the content of math formulae is overflowed.

[Liam0205]

@stevenjoezhang
Sorry for lack of information.

I'm currently on Windows 7, with Chrome 72.0.3626.119.

[Liam0205]

BTW, after upgrading to 7.0.1, I was on 6.7.0, which is fine with these equations.

[stevenjoezhang]

Thanks for your reporting. You can try to edit layout/_third-party/math/mathjax.swig like https://github.com/theme-next/hexo-theme-next/pull/488/files, and see if the problem still exist

[stevenjoezhang]

overflow: auto hidden; is not working on Mac Safari, so I edited it in https://github.com/theme-next/hexo-theme-next/pull/603/files. I'm not sure which PR caused the unexpected scroll bar

[Liam0205]

I'll check this in seconds.

[Liam0205]

For the following settings, the scroll bar still exists.

<style>
.MathJax_Display {
  overflow: auto hidden;
  overflow-x: scroll;
  overflow-y: hidden;
}
</style>

For the following settings, the scroll bar disappears.

<style>
.MathJax_Display {
  overflow: auto hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>

BTW, I asked some of my friends to see if they could reproduce this problem, with the following results:

• Android phone, Chrome 72.0: No.
• Windows, Firefox 65.0.2: No.

[Liam0205]

BTW, I love your blogs. @stevenjoezhang

[stevenjoezhang]

BTW, I love your blogs. @stevenjoezhang

@Liam0205 Thanks.

Seems we need to find a more beautiful solution to deal with the mathjax overflow problem

[wyx1818]

同样的问题，我也发现了。从6.7.0升级过来让我被这个折腾了好久，我是win10下edge和chrome都会出现滚动条，在mac，ipad，Android都没发现这个错误

[stevenjoezhang]

Fixed in #669

[Liam0205]

@stevenjoezhang Thanks for your reminding. I'll merge this modification after a new version is released to my site, and check it to see if the problem is gone.

[Liam0205]

From the test result, I believe this bug has been fixed. Thus the issue is closed.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. It is possible issue was solved or at least outdated. Feel free to open new for related bugs.