[Webkit-unassigned] [Bug 284035] New: Rendering math formulas with MathJax 3 and CommonHTML / web fonts hides parts of the fonts when scrolling
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Wed Dec 4 05:17:06 PST 2024
https://bugs.webkit.org/show_bug.cgi?id=284035
Bug ID: 284035
Summary: Rendering math formulas with MathJax 3 and CommonHTML
/ web fonts hides parts of the fonts when scrolling
Product: WebKit
Version: WebKit Nightly Build
Hardware: PC
OS: Linux
Status: NEW
Severity: Normal
Priority: P2
Component: New Bugs
Assignee: webkit-unassigned at lists.webkit.org
Reporter: travkin at solunar.de
Created attachment 473456
--> https://bugs.webkit.org/attachment.cgi?id=473456&action=review
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
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241204/188e74f1/attachment-0001.htm>
More information about the webkit-unassigned
mailing list