Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mmldev opened this issue Jun 16, 2014 · 17 comments

Comments

Projects
None yet
4 participants
@mmldev
Copy link

commented Jun 16, 2014

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

Load attached code in Chrome.

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>

<head>
    <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>

</head>

<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>
        </math>
    </p>

</body>

</html>
@pkra

This comment has been minimized.

Copy link
Member

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.)

@mmldev

This comment has been minimized.

Copy link
Author

commented Jun 16, 2014

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

@mmldev mmldev closed this Jun 16, 2014

@pkra

This comment has been minimized.

Copy link
Member

commented Jun 16, 2014

No problem at all. Thanks again for reporting.

@mmldev mmldev reopened this Jun 17, 2014

@mmldev

This comment has been minimized.

Copy link
Author

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).

@mmldev

This comment has been minimized.

Copy link
Author

commented Jun 17, 2014

I also see the issue with Chrome on iOS.

@pkra

This comment has been minimized.

Copy link
Member

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.

@pkra pkra changed the title Bug: Timeout loading STIX-Web Italic font in Chrome Bug: Timeout loading STIX-Web Italic font in Safari Jun 17, 2014

@pkra pkra changed the title Bug: Timeout loading STIX-Web Italic font in Safari Bug: Timeout loading STIX-Web Italic font in Safari (was: in Chrome) Jun 17, 2014

@mmldev

This comment has been minimized.

Copy link
Author

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?

@dpvc

This comment has been minimized.

Copy link
Member

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

<script type="text/x-mathjax-config">
if (MathJax.Hub.Browser.isChrome || MathJax.Hub.Browser.isSafari) {
  MathJax.Hub.Register.StartupHook("HTML-CSS Jax Config", function () {
    MathJax.OutputJax["HTML-CSS"].FontFaceBug = true;
  });
}
</script>

and see if that works.

@mmldev

This comment has been minimized.

Copy link
Author

commented Jun 20, 2014

The workaround worked great. Thanks.

@dpvc

This comment has been minimized.

Copy link
Member

commented Jun 20, 2014

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

@dpvc

This comment has been minimized.

Copy link
Member

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

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

@dpvc

This comment has been minimized.

Copy link
Member

commented Aug 20, 2014

=> Merged.

@dpvc dpvc added Fixed v2.5 and removed Merged labels Jan 30, 2015

@TomasRiker

This comment has been minimized.

Copy link

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?

@dpvc

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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.

@dpvc

This comment has been minimized.

Copy link
Member

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)?

@pkra

This comment has been minimized.

Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.