Error in rendering in Android WebView in some Samsung tablet

Arthur-Milchior commented 3 years ago

Issue Summary

The problem occurs in Galaxy Tab S6 and Tab A10.1 in WebView in android app. Most symbols are here but not at the right place.

I was not able to reproduce on a samsung phone, nor in chrome or in samsung browser. This mean, and I'm really sorry for this, that I really need to use a webview in an app to reproduce the problem. It's trivial to reproduce in the app, and we'll assist you in any way we can if you accept to take time to help us. I understand that it would make debugging harder.

Essentially, our app generate some html to display in a webview. Up until know, we never had any trouble displaying web, and everything rendering properly in browser were rendered properly in the webview.

Steps to Reproduce:

Install the free app AnkiDroid on android velrsion 2.15 alpha 16 ( https://github.com/ankidroid/Anki-Android/releases/tag/v2.15alpha16 )
Download the attached file mathjax.zip unzip it and import it in the app (or just use "+" to create a card and put \[\sigma_{1,2}=\frac{-\frac{B}{A} \pm \sqrt{\left(\frac{B}{A}\right)^{2}-4 \frac{C}{A}}}{2}\] in its front)
click on the deck in the main screen
Look at the rendered maths. You can see at least that the top of the square root is not correctly placed.

You can look at our investigation, in the ankidroid team, on https://github.com/ankidroid/Anki-Android/issues/7848

Technical details:

MathJax Version: Mathjax 3.1.2,
Client OS: Android 10
Browser: android.webkit.WebView

Supporting information:

If your issue is with the display of the mathematics produced by MathJax, include a screen snapshot that illustrates the problem, when possible.
Check your browser console window for any error messages, and in crude them here.

I fear I don't know how to do this one from a webview in an app

Include the MathJax configuration you are using, and the script tag that loads MathJax itself. https://github.com/hgiesel/Anki-Android/blob/5decb2e877f063a496adae30a01ee362a42cb838/AnkiDroid/src/main/assets/mathjax/conf.js and
```
<script src="file:///android_asset/mathjax/tex-chtml.js"> </script>
```

dpvc commented 3 years ago

It looks to me that the scaling of the characters isn't right (they look enlarged compared to the positioning and sizing of the horizontal lines). Could there be CSS that is interfering with MathJax's layout? Anything with a * selector, or just a [...] selector, perhaps? Or anything referring to mjx-*?

Have you tried switching to MathJax's SVG output rather than the HTML output? CSS issues tend to interact with it less often. Can you try switching to tex-svg.js instead of tex-chtml.js?

Arthur-Milchior commented 3 years ago

I just tried the very same formula with absolutely no css and it seems to produce exactly the same result, appart from the font color. So I doubt it's a CSS problem.

I tried with tex-svg.js (and of course adding the file to the app) and it works perfectly.

I should note that I can't reproduce the problem with Mathjax 2.7.1

Arthur-Milchior commented 3 years ago

So, we decided in going on with SVG, as it solves our problem. If you are interested in solving the bug with chtml and want our help, I'll be happy to contribute as much as possible and do all tests you want. I updated the reproduction step to indicate which version of the app allow to reproduce the problem

dpvc commented 3 years ago

Glad you got SVG working for you. I will leave the issue open for potential future action, but as we have very limited resources, it is not something we can pursue at this point.

Arthur-Milchior commented 3 years ago

I totally understand, thank you very much for the time you took to answer me.

mathjax / MathJax