Bug: Timeout loading STIX-Web Italic font in Safari (was: in Chrome) #845

Closed
opened this issue Jun 16, 2014 · 17 comments

Projects
None yet
4 participants

Issue Summary

When loading certain MathML formulas using STIX-Web fonts, there is a long 8 second waiting period that occurs before the MML is finally rendered. This appears to happen because of a timeout loading STIXMathJax_Main-Italic.woff, caught in function loadError in /MathJax/jax/output/HTML-CSS/jax.js and reported as:

Can't load web font STIX-Web/Main/Italic

Steps to Reproduce

This is a bug because...

• The font does exist at that location and loads successfully eventually after an 8 second timeout.
• I haven't been able to reproduce the issue on Firefox.
• I was able to reproduce this in Safari on iOS.
• The issue doesn't seem to exist when using the latest MathJax libraries (2.4-beta-2 using http://cdn.mathjax.org/mathjax/latest/MathJax.js)

Technical details

• MathJax Version: 2.3
• Client OS: Windows 7
• Browser: Chrome 35.0.1916.153
<!DOCTYPE html>
<html>

<title>MathJax Timeout Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script type="text/x-mathjax-config">
MathJax.Hub.Config({ "HTML-CSS": { webFont: "STIX-Web", availableFonts: ["STIX","TeX"], preferredFont: "TeX" } });
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/2.3-latest/MathJax.js?config=MML_HTMLorMML">
</script>

<body>

<p>Solve for x:
<p>&#160;</p>
<math display='block' xmlns='http://www.w3.org/1998/Math/MathML'>
<mrow>
<mfrac>
<mn>7</mn>
<mrow>
<mi>x</mi>
<mo>&#x2212;</mo>
<mn>5</mn>
</mrow>
</mfrac>
<mo>+</mo>
<mfrac>
<mn>4</mn>
<mrow>
<mn>4</mn>
<mo>&#x2212;</mo>
<mi>x</mi>
</mrow>
</mfrac>
<mo>=</mo>
<mfrac>
<mn>1</mn>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>&#x2212;</mo>
<mn>9</mn>
<mi>x</mi>
<mo>+</mo>
<mn>20</mn>
</mrow>
</mfrac>
</mrow>
[/itex]
</p>

</body>

</html>

Member

pkra commented Jun 16, 2014

 Thanks for reporting this. This is a duplicate of #735 and has been fixed in 2.4. We suggest to upgrade to 2.4. (By the way, http://cdn.mathjax.org/mathjax/latest/MathJax.js is the final release -- even though the revision string wasn't updated correctly during the final release; this will be hotfixed soon.)
Author

mmldev commented Jun 16, 2014

 Thanks for the response, and sorry for reporting a dup.

Member

pkra commented Jun 16, 2014

 No problem at all. Thanks again for reporting.

Author

mmldev commented Jun 17, 2014

 I'm not sure if this is the same issue, but I'm still seeing similar behavior with the latest libraries in Safari on iOS 7. I get a "Can't load web font STIX-WEb/Main/Italic" error when loading the code above (replacing the 2.3 library link with http://cdn.mathjax.org/mathjax/latest/MathJax.js).
Author

mmldev commented Jun 17, 2014

 I also see the issue with Chrome on iOS.
Member

pkra commented Jun 17, 2014

 Thanks for reporting. This sounds like a new bug (but probably related). Chrome on iOS has to use Safari's WebKit instead of Blink so such a bug will affect all browsers on iOS. We'll investigate it.

Author

mmldev commented Jun 19, 2014

 Just checking in to see if you found the cause of the issue. Is there a workaround that we could use till a fix is implemented?
Member

dpvc commented Jun 19, 2014

 I suspect it is the same WebKit issue that hit Chrome in version 32, now showing up in Safari. So I'd try   and see if that works.
Author

mmldev commented Jun 20, 2014

 The workaround worked great. Thanks.
Member

dpvc commented Jun 20, 2014

 OK, looks like we will need to extend the fix from v2.4 to include Safari as well as Chrome.

Closed

dpvc pushed a commit to dpvc/MathJax that referenced this issue Aug 19, 2014

 Force separate web font names for bold, italic in WebKit. Resolves is… 
…sue mathjax#845.
 4a4590c 

Member

dpvc commented Aug 19, 2014

 Branch issue845 of my fork of MathJax includes the broader use of FontFaceBug.

dpvc pushed a commit to dpvc/MathJax that referenced this issue Aug 19, 2014

 Force separate web font names for bold, italic in WebKit. Resolves is… 
…sue mathjax#845.
 7144485 

dpvc pushed a commit to dpvc/MathJax that referenced this issue Aug 20, 2014

 Merge branch 'issue845' into develop. Issue mathjax#845. 
 0104a90 
Member

dpvc commented Aug 20, 2014

 => Merged.

Closed

TomasRiker commented Aug 11, 2015

 I'm still seeing this problem with the latest MathJax release, however only when I enable the mobile emulation mode in Chrome. The fix suggested above by dpvc (setting FontFaceBug to true) does the trick. Is this known?
Member

dpvc commented Aug 11, 2015

 @TomasRiker, I am not able to reproduce the problem (emulation mode works fine for me). Also, the FontFaceBug value already should be set to true, so if that's not the case for you (check the value of MathJax.OutputJax["HTML-CSS"].FontFaceBug), I'll have to ask you to do some tests to see what's going on.

TomasRiker commented Aug 11, 2015

 @dpvc: Interestingly, it depends on what device I choose in the emulation mode. If I choose for example "Apple iPhone 4", then FontFaceBug will be false. If I choose "Google Nexus 4", FontFaceBug will be true, and the problem will not appear.
Member

dpvc commented Aug 11, 2015

 @TomasRiker, I don't know how well Chrome emulates the iPhone and other devices. I suspect it basically is just setting the user-agent string to look like Safari, and using the fact that Chrome is based on (a fork of) WebKit to do the Safari emulation (with some added support for things like touch events, viewport sizing, and so on). But I suspect that the individual quirks of Safari on iOS will not be taken into account. Emulators are always limited. Here's what's happening in this case. The user-agent string tries to identify the browser as Safari version 5.0.3, but MathJax doesn't use that to detect Chrome, and so, to MathJax, the emulator still looks like Chrome. But MathJax does use the user-agent string to find the browser version, so MathJax thinks this is Chrome 5.0.3. Because Chrome earlier than version 32 didn't have problems with the web fonts, the FontFaceBug value is set only for version 32 and above. When MathJax thinks the version is 5.0.3, it doesn't set the flag. For the Nexus emulation, it is emulating Chrome, and has an appropriate version number for that, so the FontFaceBug value is correct. Technically, Safari on the iPhone would be able to load the web fonts, so this is in some sense a bug with Chrome's emulation, not with MathJax. In a sense, it's also a bug to include the window.chrome object that MathJax uses to detect Chrome in an emulation of Safari, but things like that happen with emulators. I suppose MathJax could always set the flag for the Chrome browser, but you could also force it yourself for your tests, as you have done. It is an artifact of the emulation, and is not representing the true behavior of Safari on the iPhone. Emulation is useful, but is rarely perfect. @pkra, is this something we want to do something about (like set FontFaceBug all the time for Chrome)?
Member

pkra commented Aug 11, 2015

 @dpvc I suspected the UA spoofing is triggering this but thank you for the detailed write-up! I don't think we need to do anything here but honestly I don't care much, so either way is fine with me.

Open