[HTML-CSS] [Chrome 48] visual artifacts due to Chrome now rounding up [was: rendering issue in chrome canary builds]

[sean1138]

https://code.google.com/p/chromium/issues/detail?id=552421 - it's been reported there but thought it would be worth mentioning here too. the issue persists in 48.0.2560.0 canary (64-bit).

[pkra]

Thanks for reporting this. Do you see this on the SVG output as well or just the HTML-CSS output?

[pkra]

I can reproduce the issue (there seems to be a vertical bar to the right of the fraction) on Version 48.0.2560.0 dev (64-bit), Ubuntu 15.10.

However, the problem does not occur when using MathJax v2.6-beta.1 (neither HTML-CSS nor CommonHTML) so if it was a bug on our end, it's been fixed along the way.

[ghost]

@pkra Some StackExchange sites are affected by this bug (e.g. Cross Validated) Do you recommend updating to MathJax v.2.6-beta.1?

By the way, SVG output is rendered correctly.

Tested in Chrome dev 48.0.2560.0 dev (64-bit) on Ubuntu 15.10. This issue doesn't occur in Chrome beta 47.0.2526.58 beta (64-bit).

[pkra]

@rsmith31415 StackExchange sites will be upgrading as soon as 2.6 is finalized. The beta is running on math.SE if you want to compare.

[pkra]

I've updated the title. As mentioned on the Chrome tracker, this is caused by Chrome rounding up values which other browsers do not round up. I'm guessing this was fixed alongside other rounding issues. Maybe @dpvc can confirm later.

[pkra]

By "this was fixed" I'm referring to the issue disappearing in MathJax v2.6.

[ghost]

Understood. Thank you for the information.

[wchargin]

(For reference, the Chrome 47 → Chrome 48 upgrade path just opened on Ubuntu/Mint repositories, which is why there is at least one related issue and probably soon more.)

[pkra]

@dpvc do you remember if there was any reason we left this open?

[dpvc]

@pkra, no I don't recall one, and I think it can be closed.

[srikumarks]

2.6.1 works fine in Chrome and Safari, but I noticed the same issue in the current Safari Technology Preview (Version 9.1.1 (11601.6.17, 11602.1.31)). If STP has a different rounding behaviour that is triggering this, then it indicates that the code needs to be more robust to rounding. In STP, the line is span of width 0px. Example shown below.

<span style="border-left-width: 0.004em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 3.075em; vertical-align: -1.711em;"></span>

Since the error is showing in STP, it is still wait and watch, but noting it here as a headsup.

[dpvc]

@srikumarks, thanks for the information. I believe that issue #1452 addresses the problem, which will be include in the next release of MathJax.

Can you give the input that caused the given output for you? That way we can test to be sure.

[srikumarks]

Looks like #1452 will indeed fix it. The span I reported was present for all math elements.

[dpvc]

OK, thanks for the confirmation.

[ibraaaa]

I see this on Chrome for Mac OSX (version info printed below) for all equations typed in an iPython notebook.

Google Chrome 51.0.2704.63 (Official Build) (64-bit)
Revision 2989ec7055a268f05554172b2207a34c0c842b8d-refs/branch-heads/2704@{#656}
OS Mac OS X
Blink 537.36 (@2989ec7055a268f05554172b2207a34c0c842b8d)
JavaScript V8 5.1.281.47
Flash 21.0.0.242
User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36

[dpvc]

@ibraaaa, make sure that you are using MathJax version 2.6 (select the "About MathJax" item in the MathJax contextual menu obtained by control-clicking on any typeset expression). If you are using 2.5.x or earlier, then you will still see this problem. Version 2.6 includes the work-around for it.

[ibraaaa]

@dpvc, upgrading to the latest version of MathJax fixed this issue, thanks!

[dpvc]

@ibraaaa, great! Glad to hear it is working for you now.