Resizing embedded math in Chrome fails

[percy...@gmail.com]

Hello,

I have the following example...

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">

    <g transform="scale(1.2)">

      <foreignObject width="300" height="300">

        <div>$G^2$</div>

      </foreignObject>

    </g>

  </svg>

When scale=1, everything is fine, but as scale increases to 1.2, the $G^2$ does not become larger, but instead, the bounding box somehow becomes smaller and the bottom of the G becomes more clipped off.  This happens on Chrome (version 21.0.1180.49), Ubuntu Linux 10.04.4, but is fine in Firefox.  Does anyone know why this happens?

As a side note, I'd rather not use foreignObject and div, but <text>...</text> instead.  Unfortunately, MathJax doesn't seem to render inside <text>, even when explicitly told to.  What is the right way to embed MathJax in an SVG object?

Attached is the full code.

Thanks,

 -Percy

[Davide P. Cervone]

After a little testing (but not yet enough), this looks like a bug in
WebKit. I see it in Safari as well as Chrome. I will look into it,
but I'm not sure I will be able to find a work-around.

You are right, MathJax doesn't render inside <text>...</text> inside
SVG. A <text> block can only contain text, so that would require
MathJax to break up the <text> element, reposition the pieces, and
insert SVG (not HTML-CSS or NativeMML) output. It would be
potentially possible using the SVG output jax, but this isn't
currently supported. The <foreignObject> approach is the only one
that currently works (except in IE9, which doesn't implement
<foreignObject>).

It is certainly a use-case to consider for future development.

Davide


On Aug 5, 2012, at 7:21 PM, <percy...@gmail.com>

> <bad-resize.html>

[Davide P. Cervone]

PS, I have started an issue tracker on GitHub for this problem.

https://github.com/mathjax/MathJax/issues/279

On Aug 5, 2012, at 7:21 PM, <percy...@gmail.com>
<percy...@gmail.com> wrote:

> <bad-resize.html>

[Frédéric WANG]

For the record, I've isolated one of the issue and reported it upstream:
https://bugs.webkit.org/show_bug.cgi?id=93358

--
Fr�d�ric Wang
maths-informatique-jeux.com/blog/frederic

[barbara....@gmail.com]

I think I'm having the same issue.  See this jsfiddle:  http://jsfiddle.net/margolius/dmExU/.  It works fine in Firefox and is a mess in Chrome.  I have not tried Safari, but assume it fails there also.

I tried a workaround with jQuery code to force rerendering after the animation is complete but it rerenders too early.  

Has there been progress on this issue?  If not can someone suggest a workaround?  I'm trying to facilitate zooming so that a version of an html5 applet will work on tablets and cellphones.  There will be several of these tiles and users need to be able to read them.

Oddly, if I resize the screen the MathJax scale perfectly in Chrome and Firefox; it is something about resizing with an animation that fails.

Thanks.

Fr�d�ric Wang
maths-informatique-jeux.com/blog/frederic

[Davide Cervone]

Barbara:

This is not the same issue.  Percy's issue was due to a bug in SVG that affects foreinObject elements to which a transformation has been applied.  That is not what is happening in your case.  

Because of some alignment problems in recent versions of Chrome (post version 18 or so), MathJax uses absolute dimensions (in terms of pixels) rather than relative ones (in terms of em's) to position the mathematics in Chrome.  These dimensions in pixels are not affected by your animation, and so the positioning distances don't scale up with the animation.  In other browsers, the dimensions in em's do scale with the animation.  That is the difference.  When you reload the page at the zoomed size, MathJax uses the correct number of pixels for that scale.  But if you change the font-size dynamically, that will not propagate to the positioning of the math in Chrome.

If you are willing to accept the small alignment issues (like not quite matching the baseline of the math and surrounding text), then you could add

MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {

  if (MathJax.Hub.Browser.isChrome) {
    MathJax.OutputJax["HTML-CSS"].Augment({
      Em: function (m) {
        if (Math.abs(m) < .0006) {return "0em"}
        return m.toFixed(3).replace(/\.?0+$/,"") + "em";
      },
      unEm: function (m) {
        return parseFloat(m);
      }
    });

  }

});

to the bottom of your text/x-mathjax-config script, and that will put back the dimensions to em's rather than pixels.  Then the math will enlarge with the animation as it does with the other browsers.

Davide

PS, sorry for the long delay in getting back to you.  I'm very far behind.