Mathjax: [HTML-CSS] Safari 10.1 regression wrt accents
As reported on meta.math.SE, there is a regression introduced by Safari 10.1. Minimal example: $\tilde g$ (but the tilde is misplaced).
pkra
All 31 comments
FYI I couldn't get an up-to-date Safari to reproduce this.
pkra
on 18 Apr 2017
Possible duplicate of #1709. Not the case since this is specific to the HTML-CSS output (and #1709 to the CommonHTML output).
pkra
on 18 Apr 2017
I can reproduce using $\vec{v}$ in Safari 10.1 on macOS 10.12.4. However, $\tilde g$ appears to work just fine.
Is there anything I can do to help investigate this issue? :)
nikolajvonholck
on 10 May 2017
Is there anything I can do to help investigate this issue? :)
Thanks but not really.
You can switch to the CommonHTML or SVG renderer to avoid the problem.
pkra
on 10 May 2017
You can switch to the CommonHTML or SVG renderer to avoid the problem.
These two renders gave me [Math Processing Error]
"This bug is from Safari instead of MathJax. We can only wait Apple to fix it."
Is this the case?
lwshang
on 19 May 2017
These two renders gave me [Math Processing Error]
Do you have a live page that exhibits the problem?
"This bug is from Safari instead of MathJax. We can only wait Apple to fix it."
What is the source of this claim?
Is this the case?
Not necessarily.
However, we strongly suggest to switch to the CommonHTML or SVG output. Besides being faster, we're working on v3 right now and the HTML-CSS output will not be available in v3.
pkra
on 19 May 2017
I am attaching two screenshots one from Safari (showing misplaced) and the same page in Chrome (showing correct rendering). The live page that reproduces them is on my own website but you will need to accept my certificate (Google Chrome and Safari will both report that as a security threat) to view it: https://www.khurasia.com/notes/index.html?chapter=https%3A%2F%2Fwww.khurasia.com%2Fnotes%2Fserver%2Freslookup.php%3Ftopic%3D3D.Vector.Calculus%26chapter%3D1.Definitions.of.Operators.md
Safari:
Chrome:
This same problem exists on iOS Safari as well because they probably use the same underlying engine.
apoorvkhurasia
on 20 May 2017
Thanks. We're aware of the issue even if we haven't tracked down the source.
Switching to another output is recommended.
pkra
on 20 May 2017
CommonHTML does not typeset \vec correctly on latest Safari (10.1.1) on Sierra 10.12.5. Neither does HTML-CSS. But SVG gets it correct. Please see the attached screenshot for CommonHTML but HTML-CSS looks almost exactly the same (made using Mathjax official dynamic preview).
luc-j-bourhis
on 30 May 2017
CommonHTML does not typeset \vec correctly on latest Safari (10.1.1) on Sierra 10.12.5.
Correct. That's https://github.com/mathjax/MathJax/issues/1709
pkra
on 30 May 2017
The issue has to do with a change in Safari 10.1 that alters how combining characters are handled when there is no preceding character. MathJax places these characters "by hand", so a combining character like the vector arrow (U+20D7) used to be handled one way by Safari, but now is handled differently, and that accounts for the spacing problem. I have written a more thorough explanation in the #1709 thread.
For now, here is a patch that works around the issue:
<!DOCTYPE html>
<html>
<head>
<title>MathJax Safari vector placement</title>
<script type="text/x-mathjax-config">
if (MathJax.Hub.Browser.isSafari && parseInt(MathJax.Hub.Browser.webkit) >= 603) {
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready", function () {
var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
var MML = MathJax.ElementJax.mml;
var toHTML = MML.mo.prototype.toHTML;
MML.mo.Augment({
toHTML: function (span) {
span = toHTML.call(this,span);
if (span.bbox.w === 0 && span.bbox.lw < 0 && span.firstChild) {
span.style.marginLeft = HTMLCSS.Em(span.bbox.lw);
}
return span;
}
});
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>
</head>
<body>
\(\vec x\)
</body>
</html>
Because the HTML-CSS output has browser-specific hacks, it is easy to isolate the patch to just Safari, whereas the CommonHTML does not allow that, and it is much harder to get a solution that works across all browsers.
dpvc
on 2 Jun 2017
Hi Davide
Thanks for the workaround. However, it doesn't seem to work on Mobile Safari (iOS devices). Is there a way to make it work there as well? :)
nikolajvonholck
on 5 Jun 2017
A (very hacky) solution that I accidentally discovered: if one explicitly adds in "\hspace{0pt}$ before the character in the corresponding accent command (e.g. \tilde, \bar, \vec), it renders the spacing correctly. An example of trying to render a circumflex in a Jupyter notebook:
I've experimented with \tilde and \vec, and it appears to work for those as well. And I checked on a different computer which has an older version of Safari (before 10.1), and the rendering comes out exactly the same. It's not a perfect fix, since the size of the circumflex is larger, nor is it elegant (though perhaps one could define a new command that adds in the \hspace command to make it more elegant). But it is a quick fix for people that are looking for one.
krsanta
on 9 Jun 2017
@nikolajholck:
it doesn't seem to work on Mobile Safari (iOS devices)
I don't have a new enough iPad to run iOS 10, so can't check it there. Can you try removing the
&& MathJax.Hub.Browser.versionAtLeast("10.1")
from the conditional and see if that helps? If not, can you tell me what version of iOS and Safari you are using?
dpvc
on 12 Jun 2017
Removing the version check works on iOS 10.3.1 :) However, then the\vecs are offset to the left on iOS 10.2 (and on lower version as well, I assume). I have executed MathJax.Hub.Browser in the Javascript console on the latest version of Safari on macOS 10.12.5, iOS 10.2 and iOS 10.3.1. Based on this I think that we should check against the webkit-key, since the problem appears to arise in version MathJax.Hub.Browser.webkit >= 603. Checking for this should work on both macOS and iOS. What do you think @dpvc? :)
MathJax.Hub.Browser on iOS 10.3.1 (_has_ the issue):
0: "S"
1: "a"
2: "f"
3: "a"
4: "r"
5: "i"
Select: function(j)
isChrome: false
isEdge: false
isFirefox: false
isKonqueror: false
isMSIE: false
isMac: false
isMobile: true
isOpera: false
isPC: false
isSafari: true
length: 6
name: "Safari"
noContextMenu: true
version: "8.0"
versionAtLeast: function(y)
webkit: "603"
MathJax.Hub.Browser on iOS 10.2 (_doesn't have_ the issue):
0: "S"
1: "a"
2: "f"
3: "a"
4: "r"
5: "i"
Select: function(j)
isChrome: false
isEdge: false
isFirefox: false
isKonqueror: false
isMSIE: false
isMac: false
isMobile: true
isOpera: false
isPC: false
isSafari: true
length: 6
name: "Safari"
noContextMenu: true
version: "8.0"
versionAtLeast: function(y)
webkit: "602"
MathJax.Hub.Browser on macOS 10.12.5 using Safari 10.1.1 (_has_ the issue):
0: "S"
1: "a"
2: "f"
3: "a"
4: "r"
5: "i"
Select: function(j)
isChrome: false
isEdge: false
isFirefox: false
isKonqueror: false
isMSIE: false
isMac: true
isMobile: false
isOpera: false
isPC: false
isSafari: true
length: 6
name: "Safari"
noContextMenu: false
version: "10.1.1"
versionAtLeast: function(y)
webkit: "603"
@nikolajholck, thanks for the detailed analysis of the situation! It does look like you are right, we need to use the webkit version rather than the browser version for this. So I've modified my code above to check for that instead. Note that the webkit property is actually a string, so to compare it to 603, you need to use parseInt() first. I've added that to my code above.
Thanks again!
dpvc
on 13 Jun 2017
The issue1737 branch of my fork of MathJax includes the fix for this.
dpvc
on 24 Jun 2017
==> In testsuite
MathMLToDisplay/Presentation/ScriptsAndLimits/mover/issue1737.html
dpvc
on 10 Jul 2017
==> Merged
dpvc
on 10 Jul 2017
Thank you. This fix works.
apoorvkhurasia
on 23 Jul 2017
I'm still having the problem more than a year later (in Jupyter notebooks). Since this issue was closed with a fix, is this a regression and the issue should be reopened?
goerz
on 27 Jun 2018
I'm not sure if Jupyter notebook installs its own copy of MathJax or uses a CDN version. What version of MathJax are you using? (You can check using the "About MathJax" item in the MathJax contextual menu -- control-click on any typeset mathematics to get the menu.) You need to be using version 2.7.2 or later in order to have the fix.
dpvc
on 27 Jun 2018
@goerz, it looks like there is an open issue to update to version 2.7.2 in Jupyter notebook. Perhaps encouraging them there might help.
dpvc
on 27 Jun 2018
Ah, that explains it: it shows v2.6.0. Thanks for the clarification!
goerz
on 27 Jun 2018
So I tried to run the jupyter notebook using a local clone of the current master mathjax repo, and that shows the accents correctly on Safari 11.1.1, but not on Safari 10.0.1
See https://github.com/jupyter/notebook/issues/3250#issuecomment-401147361
I'm reasonably sure I cleared all my caches and such.
goerz
on 28 Jun 2018
I see that your 10.0.1 experience is in a Fluid app. Can you use the "About MathJax" item in the MathJax contextual menu to see what MathJax thinks the browser and version are? It might be that MathJax is not properly identifying the browser, and so not applying the needed patch. Also, was this in HTML-CSS or CommonHTML output?
dpvc
on 29 Jun 2018
That would make sense! The last line of "About MathJax" depends on the User Agent that I set in the Fluid app. For the "Safari 10" user agent, MathJax says "Safari v10.0.1 — woff or otf fonts". For the "Default Fluid App" agent the reported version is "Safari v8.0 — woff or otf fonts". In contrast, accessing the same server from the same computer using normal Safari reports "Safari v11.1.1".
So my guess is that even though the system has v11, it reports itself as v10, and MathJax applies a patch for v10 that doesn't work in v11?
This is all with the HTML-CSS renderer. CommonHTML seems to put the hats correctly over characters, but it also has some other rendering problems where letters in the denominator of a fraction don't have the correct baseline:
The only renderer that's ever produced consistently perfect output for me is SVG.
goerz
on 29 Jun 2018
I've looked back at the code in HTML-CSS, and it turns out that the patch is applied based on the WebKit version rather than the browser version. Can you use a developer console in the Fluid app to find out what
MathJax.OutputJax["HTML-CSS"].combiningCharBug
contains? If not, can you use a script that inserts its value into the page (after MathJax runs -- you can queue a function to run after MathJax does by using MathJax.Hub.Queue(function () {...}) after MathJax is loaded).
If the value is false, can you check what
MathJax.Hub.Browser.webkit
contains?
Thanks.
dpvc
on 29 Jun 2018
Sure! No problem - there's a developer console in Fluid
MathJax.OutputJax["HTML-CSS"].combiningCharBug is true and MathJax.Hub.Browser.webkit is 605
Correction: The above was for user-agent "Default Fluid App". For the "Safari 10" user agent, I get
MathJax.OutputJax["HTML-CSS"].combiningCharBug as false and MathJax.Hub.Browser.webkit as 602
goerz
on 30 Jun 2018
Thanks. When the combiningCharBug is true, it should be triggering the fix for the combining characters. (The WebKit version that triggers the change is 603.)
I'm a little confused about which settings cause correct and incorrect placement. When set to "Default Fluid App" is the placement correct? (It should be, based on the combiningCharBug value.) Is it incorrectly placed for "Safari 10"? I'm not sure I had an accurate WebKit version for when the bug first appeared, so it might be that it needs to be 602 rather than 603 that is the trigger.
Could you try setting to "Safari 10", and in the developer console, use
MathJax.OutputJax["HTML-CSS"].combiningCharBug = true;
MathJax.Hub.Rerender();
and see if that properly displays the accents? This should set the bug flag manually and redisplay the output.
dpvc
on 30 Jun 2018
It didn't seem like it yesterday, but "Default Fluid App" now places the hats correctly for the HTML-CSS renderer (I must not have cleared my cache properly, or something like that). Also, I checked that the "Default Fluid App" reports the same WebKit version (605) as the normal system Safari app.
With "Safari 10" I also get the proper accents by setting combiningCharBug to true and manually calling Rerender. So it looks like all is as it should be (but Jupyter should definitely upgrade their bundled MathJax). Thanks for helping me figure this out!
goerz
on 1 Jul 2018
Related issues
pkra
·
15Comments
trebor
·
9Comments
gbala2412
·
8Comments
Manishearth
·
36Comments
pkra
·
8Comments
Most helpful comment
The issue has to do with a change in Safari 10.1 that alters how combining characters are handled when there is no preceding character. MathJax places these characters "by hand", so a combining character like the vector arrow (U+20D7) used to be handled one way by Safari, but now is handled differently, and that accounts for the spacing problem. I have written a more thorough explanation in the #1709 thread.
For now, here is a patch that works around the issue:
Because the HTML-CSS output has browser-specific hacks, it is easy to isolate the patch to just Safari, whereas the CommonHTML does not allow that, and it is much harder to get a solution that works across all browsers.