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

Google Chrome sometimes puts the formulas too high or too low. #576

Closed
SixWingedSeraph opened this issue Sep 17, 2013 · 19 comments

Comments

Projects
None yet
3 participants
@SixWingedSeraph
Copy link

commented Sep 17, 2013

Here are some comments about MathJax rendition on my site http://www.abstractmath.org/Word%20Press/
which uses WordPress software and (on recent posts) the MathJax Latex plugin.

Mike Stay
Yesterday 1:08 PM
Chrome on a mac makes all your formulae appear below the text that follows them. Safari and Firefox both render your page well. MathJax seems to fail only on your site, however; mathoverflow.net, for example, renders just fine. Screenshot here: http://i.imgur.com/25IX0DO.png

Charles Wells
Yesterday 3:56 PM
Chrome on Windows 7 works fine, except sometimes the formulas are way out of line. Then refreshing usually makes it normal (sometimes you have to refresh twice). Thanks for notifying me.

William Rutiser
Yesterday 4:17 PM
My Chrome on Windows 7 seems pretty non-deterministic. Repeated refreshing with F5 can give either result.

Mike Stay
Yesterday 4:26 PM
How strange! When I hold down shift-⌘R to refresh the page without using cached content, it displays properly. When I use ⌘R without shift to refresh the page but use the files in my browser cache, it displays wrong. Whatever is being fetched from the cache is broken; I don't know if that's because of a bug in Chrome or a bug in the content being delivered to my browser.

@dpvc

This comment has been minimized.

Copy link
Member

commented Dec 16, 2013

I am not able to reproduce the problem. Is it still occurring for you or your user? If so, can we get a Chrome version number?

@SixWingedSeraph

This comment has been minimized.

Copy link
Author

commented Dec 17, 2013

My Chrome version number is Version 31.0.1650.63 m. It still occurs
occasionally.

@dpvc

This comment has been minimized.

Copy link
Member

commented Dec 17, 2013

Thanks for the update. I'll check into it.

@ErnWong

This comment has been minimized.

Copy link

commented Jan 3, 2014

Hello, I have a similar problem on my own document. I have uploaded here: https://googledrive.com/host/0B72MM6AmH2NaajJfdlZnOFR0NGc/test.html

Google Chrome (version 31.0.1650.63 m)

First load and reloading from address bar:

a

Reloading with button:

b

Opera (version 12.16)

c

Rendering of \[r=\sqrt{\left(x_2 - x_1\right)^2+\left(y_2 - y_1\right)^2}\]:

Chrome:
Opera:

but the one with Opera might be a separate issue.

The page loads MathJax dynamically using document.createElement() and links to the secure CDN.

Thanks.

@ErnWong

This comment has been minimized.

Copy link

commented Jan 3, 2014

I found this, https://groups.google.com/forum/#!searchin/mathjax-users/google$20chrome/mathjax-users/Q3VDHICdop0/nn61-6bFoLMJ

Doing what they discussed, re-rendering the equations, works on my computer.

@dpvc

This comment has been minimized.

Copy link
Member

commented Jan 4, 2014

@ErnWong, thanks for the test page and the images.

The problem, here, is due to the web-fonts that are in use on the page. If MathJax runs before the fonts have arrived, it can't measure the size of the page font properly, and ends up getting the wrong sizes for the ex and em sizes (in fact, it gets 0 for both). This throws off the layout.

There are several possible solutions in v2.3 of MathJax. One is to set the matchFontHeight property to false in the HTML-CSS block of your configuration (and also in NativeMML and SVG, probably). This would prevent MathJax from trying to match the surrounding font. This avoids the problem by not trying to measure the page font, but it does mean that the math may be too large or too small in comparison to the surrounding text.

The other way is to use the MatchWebFonts extension, which will try to detect the loading of the page web fonts and redisplay the math when they arrive. This is something like the re-rendering that was recommended in the page that you link to. This extension is new in v2.3, and I would be interested to see how effective it is for you, as it has not seen a lot of use so far, and may need tweaking.

I found out today, however, that the https version of mathjax/latest is still serving v2.2 not v2.3, so you would need to use https://c328740.ssl.cf1.rackcdn.com/mathjax/2.3-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML in order to get v2.3 until that is fixed.

@SixWingedSeraph, you page also uses web fonts, so this is likely the problem there as well (though I didn't investigate it as carefully as ErnWong's page). The page listed in the forum page also uses web fonts.

@dpvc

This comment has been minimized.

Copy link
Member

commented Jan 4, 2014

It may be possible to have MathJax wait a bit automatically if it finds the em and ex size to be 0. I'll check into it for a future version. But for now, one of the solutions above would be best.

@ErnWong

This comment has been minimized.

Copy link

commented Jan 17, 2014

Thanks! I've set my font to equal MathJax's Gyre Termes and matchFontHeight to false, and it works brilliantly (except a few capital letters misaligned from the baseline).

I also tried using the MatchWebFonts extension. It works well, but a <span> 1 px wide poked through the text:
d

(I'm not sure if the extension caused it though. It seems like as if it was)
It occurs in Google Chrome and other web browsers too.

Usually, it would be invisible, but in my document the parent's background colour was set to white, and the <span> inherited it (edit: sorry, it was my poor CSS skills, I've set every background white). Also, because it was in a link, the whole vertical span was also click-able.

@dpvc

This comment has been minimized.

Copy link
Member

commented Jan 17, 2014

The span you have indicated is one that MathJax uses to determine the ex and em measurements. It is supposed to be removed after the measurements are taken. I'm not sure whey that isn't the case here. Can you post a link to a page that exhibits the problem (or you can send me one privately if you prefer)?

@ErnWong

This comment has been minimized.

Copy link

commented Jan 17, 2014

Here you go! (but it's different to the images though. These pages are smaller):

The page with the extension leaves the spans most of the time, while the one without extension and the one without web fonts doesn't. edit: it seems that it doesn't show up all the time

I've set every background white again, and added a black div to see it clearly.

@dpvc

This comment has been minimized.

Copy link
Member

commented Jan 18, 2014

Thanks. I can reproduce the issue in the first link above. I'll check into it. It certainly seems that the measurement spans are not being removed. I'll let you know what I find.

@dpvc

This comment has been minimized.

Copy link
Member

commented Jan 20, 2014

OK, I found the problem. The process used is to add the measuring spans (that you see as vertical lines) to all the math elements, then check if the size of any of them has changed since the last time, then remove all the spans. It is done in this order to avoid extra reflows of the page that would occur if you added, checked, and removed from each equation separately. In any case, what happens is that when an equation is found that needs to be rescaled, MatchWebFonts removes it from the list (since it won't need to be processed again later), and so when the spans are removed, that one fails to have its measuring span removed. It is an easy fix in the code, but not so easy to patch before we make a new release. You could add the following

<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("MathWebFont Extension Ready", function () {
  MathJax.OutputJax["HTML-CSS"].Augment({
    checkFonts: function (check,scripts) {
      if (check.time(function () {})) return;
      var size = [], i, m, retry = false;
      for (i = 0, m = scripts.length; i < m; i++) {
        script = scripts[i];
        if (script.parentNode && script.MathJax.elementJax) {
          script.parentNode.insertBefore(this.EmExSpan.cloneNode(true),script);
        }
      }
      for (i = 0, m = scripts.length; i < m; i++) {
        script = scripts[i]; if (!script.parentNode) continue; retry = true;
        var jax = script.MathJax.elementJax; if (!jax) continue;
        var span = document.getElementById(jax.inputID+"-Frame");
        var test = script.previousSibling;
        var ex = test.firstChild.offsetHeight/60;
        var em = test.lastChild.lastChild.offsetHeight/60;
        if (ex === 0 || ex === "NaN") {ex = this.defaultEx; em = this.defaultEm}
        if (ex !== jax.HTMLCSS.ex || em !== jax.HTMLCSS.em) {
          var scale = ex/this.TeX.x_height/em;
          scale = Math.floor(Math.max(this.config.minScaleAdjust/100,scale)*this.config.scale);
          if (scale/100 !== jax.scale) {size.push(script); scripts[i] = {}}
        }
      }
      scripts = scripts.concat(size);
      for (i = 0, m = scripts.length; i < m; i++) {
        script = scripts[i];
        if (script && script.parentNode && script.MathJax.elementJax) {
          script.parentNode.removeChild(script.previousSibling);
        }
      }
      if (size.length) {HUB.Queue(["Rerender",HUB,[size],{}])}
      if (retry) {setTimeout(check,check.delay)}
    }
  });
});
</script>

to your file before the script the loads MathJax.js, and that should fix it until we make a new release. It's a bit long, but I don't see any better way for now. (Technically, there is a similar adjustment that should be done for the SVG output jax, but since you aren't using that, the chances are small that you will need it, so I'd leave that go and let the next release take care of that.)

@ErnWong

This comment has been minimized.

Copy link

commented Jan 23, 2014

Thank you. I've tried adding the adjustment to https://googledrive.com/host/0B72MM6AmH2NaajJfdlZnOFR0NGc/span.match.html, and it seems that the issue still exists. Strangely, it seems that I can no longer see the issue in my original document now (without the correction): edit: I can see it now: https://googledrive.com/host/0B72MM6AmH2NaSGFtcm56aW5hdkk/11MPU/source.html
But now, I realised that one of MathJax equations is missing: the \(+\) that meant to be above the small arrow in figure 1.1. I might be misusing MathJax for that though.

@dpvc

This comment has been minimized.

Copy link
Member

commented Jan 23, 2014

I think there is probably a timing issue here, and the MatchWebFonts extension signal is coming before the HTML-CSS jax is fully loaded, so the fix is not being applied (I checked and it isn't). So try changing the code to

<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("MathWebFont Extension Ready", function () {
  MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {
    MathJax.OutputJax["HTML-CSS"].Augment({
      checkFonts: function (check,scripts) {
        if (check.time(function () {})) return;
        var size = [], i, m, retry = false;
        for (i = 0, m = scripts.length; i < m; i++) {
          script = scripts[i];
          if (script.parentNode && script.MathJax.elementJax) {
            script.parentNode.insertBefore(this.EmExSpan.cloneNode(true),script);
          }
        }
        for (i = 0, m = scripts.length; i < m; i++) {
          script = scripts[i]; if (!script.parentNode) continue; retry = true;
          var jax = script.MathJax.elementJax; if (!jax) continue;
          var span = document.getElementById(jax.inputID+"-Frame");
          var test = script.previousSibling;
          var ex = test.firstChild.offsetHeight/60;
          var em = test.lastChild.lastChild.offsetHeight/60;
          if (ex === 0 || ex === "NaN") {ex = this.defaultEx; em = this.defaultEm}
          if (ex !== jax.HTMLCSS.ex || em !== jax.HTMLCSS.em) {
            var scale = ex/this.TeX.x_height/em;
            scale = Math.floor(Math.max(this.config.minScaleAdjust/100,scale)*this.config.scale);
            if (scale/100 !== jax.scale) {size.push(script); scripts[i] = {}}
          }
        }
        scripts = scripts.concat(size);
        for (i = 0, m = scripts.length; i < m; i++) {
          script = scripts[i];
          if (script && script.parentNode && script.MathJax.elementJax) {
            script.parentNode.removeChild(script.previousSibling);
          }
        }
        if (size.length) {MathJax.Hub.Queue(["Rerender",MathJax.Hub,[size],{}])}
        if (retry) {setTimeout(check,check.delay)}
      }
    });
  });
});
</script>

and see if that fixes it.

@ErnWong

This comment has been minimized.

Copy link

commented Jan 24, 2014

Thanks! Everything is working well now. (I changed HUB to MathJax.Hub)

@dpvc

This comment has been minimized.

Copy link
Member

commented Jan 24, 2014

Good catch. I have modified my message above to reflect the change.

dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 6, 2014

Davide P. Cervone
Make sure measuring spans are removed from all elements (including th…
…e ones that were changed). Resolves second half of issue mathjax#576.

@dpvc dpvc closed this Feb 6, 2014

@dpvc dpvc reopened this Feb 6, 2014

@dpvc

This comment has been minimized.

Copy link
Member

commented Feb 6, 2014

Sorry hit the "close" button accidentally.

dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 21, 2014

Davide P. Cervone
Add a check if defaultEm is zero, and retry after a delay if it is. W…
…ebKit seems to have this happen sometimes when web fonts are used for the page (though hard to reproduce). Resolves issue mathjax#576.

@dpvc dpvc removed the In Development label Feb 21, 2014

@dpvc

This comment has been minimized.

Copy link
Member

commented Feb 21, 2014

In terms of the issue with placement of the math being wrong (crushed up and below the line), I believe this is due to a problem measuring the em-size for web fonts that haven't arrived yet. I've added a test to see if the default em size ends up being zero, and if so, try again after a short delay. This seems to resolve the problem in my tests.

dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 22, 2014

@dpvc dpvc added Merged and removed Ready for Review labels Feb 22, 2014

@dpvc

This comment has been minimized.

Copy link
Member

commented Feb 22, 2014

=> Merged.

@dpvc dpvc closed this Feb 22, 2014

@dpvc dpvc added v2.4 and removed Merged labels Jun 30, 2014

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.