NEW 284035
Rendering math formulas with MathJax 3 and CommonHTML / web fonts hides parts of the fonts when scrolling 
https://bugs.webkit.org/show_bug.cgi?id=284035
Summary Rendering math formulas with MathJax 3 and CommonHTML / web fonts hides parts...
Dietrich Travkin
Reported 2024-12-04 05:17:06 PST
Created attachment 473456 [details] Actual result (issue) on RHEL 9.2, GTKWebKit demo browser result (issue), Expected result After migrating to latest MathJax JavaScript library (Vers. 3.2.2) I found a rendering issue in WebKit. When rendering math formulas with MathJax and scrolling the web page some parts of the fonts disappear. (See also original bug report: https://github.com/eclipse-platform/eclipse.platform.ui/issues/2519) Steps to reproduce: 1. Create a file example.html with the following content (see code block below). 2. Open the file in a WebKit-based browser on a Linux OS or latest GTKWebkit and its demo browser taken from master branch. 3. Be sure that the web browser window is small enough so that the math formulas are not visible yet. 4. Scroll down to the section "Mathematical expressions" to see the MathJax rendered math formulas and observe the following rendering issue: Some or all formulas are missing arbitrary parts of their fonts (see screenshot below) If you resize the web browser window a little, the fonts are immediately re-rendered and look ok. Scrolling again reproduced the issue. Check the analysis steps and used environments below. example.html: <html> <head> <meta charset='utf-8'> <meta http-equiv='x-ua-compatible' content='IE=edge'/> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script type=text/x-mathjax-config> window.MathJax = { options: { enableMenu: true, ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' }, tex: { inlineMath: [ ['$','$'], ['\\(','\\)'] ], displayMath: [ ['$$','$$'], ['\\[','\\]'] ], processEscapes: true, tags: "ams", autoload: { color: [] }, packages: {'[+]': ['noerrors']} }, loader: { load: ['input/asciimath', '[tex]/noerrors'] } }; </script> <script type="text/javascript" id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"> </script> </head> <h1>Lorem impsum</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p> <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo </p> <h1>Mathematical expressions</h1> <p> <span class="math inline">\(H_2O\)</span> and <span class="math inline">\(CO_2\)</span> are chemical molecules. </p> <p> <span class="math inline">\(n! = \prod_{i=1..n}i\)</span> </p> <p>Einstein's formula <span class="math inline">\(E=mc^2\)</span> is famous. </p> <p>Formula in display mode (with LaTeX commands):</p> <p> <span class="math display">\[\sum_{i=1}^{n}=\frac{n(n+1)}{2}\]</span> </p> <p>Other expressions:</p> <p> <span class="math display">\[a_0+{1\over a_1+ {1\over a_2+ {1 \over a_3 + {1 \over a_4}}}}\]</span> </p> <p> <span class="math display">\[x_{1/2} = -\frac{p}{2}\pm \sqrt{\frac{p^2}{4}-q}\]</span> </p> </body> </html> Analysis: I tried - finding a solution in MathJax's documentation (https://docs.mathjax.org/en/latest/index.html) and FAQs (https://docs.mathjax.org/en/latest/misc/faq.html), no success. But there was a hint to a potential web browser issue with loading web fonts (https://docs.mathjax.org/en/latest/misc/faq.html#mathematics-is-not-rendering-properly-in-ie-how-do-i-fix-that, https://docs.mathjax.org/en/v2.4-latest/misc/faq.html#why-is-mathjax-using-image-fonts-instead-of-web-fonts) when using CommonHTML (chtml) as MathJax's rendering output (https://docs.mathjax.org/en/latest/web/components/output.html#output-chtml). - changing the MathJax versions, suspecting an issue in MathJax, but in all 3.x versions the issue remained. - using MathJax 2.7.2 there was no issue - using the OS's web browsers, e.g. Chrome or Firefox or Safari, there was no issue - using other operating systems, e.g. MacOS Sequoia (Version 15.0.1), there was no issue - letting MathJax render SVG output instead of web fonts (i.e. changing tex-mml-chtml.min.js to tex-mml-svg.min.js) produced no issue - The issue also arises with the latest GTKWebkit and its demo browser taken from master branch (see screenshot). - We did not test under GNOME, however. It would be interesting to see if this happens under GNOME as well or if there are some differences in e.g. font configuration compared to KDE Plasma that avoid this issue. However, the issue still happens even when disabling font smoothing and hinting in KDE Plasma, so we doubt the font rendering/config is related to this problem. Environment: The issue arises under this environment: OS & version: Operating System: Red Hat Enterprise Linux 9.2 (Plow) CPE OS Name: cpe:/o:redhat:enterprise_linux:9::baseos Kernel: Linux 5.14.0-284.25.1.el9_2.x86_64 Architecture: x86-64 Eclipse IDE/Platform version: custom build Version: 2023-12 (4.30) Build id: R20240731-1447
Attachments
Actual result (issue) on RHEL 9.2, GTKWebKit demo browser result (issue), Expected result (464.40 KB, application/zip)
2024-12-04 05:17 PST, Dietrich Travkin 		no flags
Details
test case (7.94 KB, text/html)
2024-12-04 08:54 PST, Alexey Proskuryakov 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2024-12-04 08:54:51 PST
Created attachment 473459 [details] test case Same test as an attachment. As a data point, this does not reproduce for me in Safari, including STP 208.
Radar WebKit Bug Importer
Comment 2 2024-12-11 05:18:12 PST
<rdar://problem/141278597>
Dietrich Travkin
Comment 3 2025-03-11 06:15:40 PDT
Is there any progress on that issue?
Note You need to log in before you can comment on or make changes to this bug.