Font's are chaning when clicked a button on mobile

[Ramakrishna Salagrama]

Hello, I recently observed that especially on chrome android, when I click a button to reveal content, the font of the text above the button is changing. 

https://www.campusgate.in/2011/11/permutations.html?m=1

I did not observe any change in fonts on desktop chrome browser. See the font's size in the below pics. Any suggestions. I suspect this is because the mathjax inside the button. I did not observe any font difference on any page when there is no hide/show button. 

Thanks in advance.

[Murray]

For the record, I also saw this on Chrome Android, but not other phone browsers.

I couldn't see any CSS that was being added when you click the button(s), so it is a mystery.

BTW, the buttons are really confusing, since after clicking "Show answer", that same button then closes the answer, and "Show explanation" also closes the explanation once it's opened.

Regards

Murray

[Davide Cervone]

I also see this on Chrome Android, but I don't see how it has to do with MathJax.  It occurs for me when I just press the "Show Answer" button but before pressing the "Show Explanation" button.  The "Show Answer" button simply sets the display CSS property on the spoiler <DIV> element, so I don't see how any CSS changes would occur (unless there is another click handler higher up in the hierarchy that might be fired as well, but I didn't see one).  It does not look like MathJax runs when the button is pressed, so I would be surprised if this had anything to do with MathJax specifically.

I have looked at the page using remote debugging, and can't find any reason for the font size to change, so I'm assuming it is a Chrome bug.

I did discover a work-around, however.  If you put an empty <div> before the spoiler <div>, then clicking the answer button doesn't change the font size above.

Note that you get a similar effect in the spoiler <div> when you clock the explanation button (the "Answer: A" changes size).  Again, an empty <div> tag before spoiler1A <div> prevents that.

Note that your text is not inside an explicit tag, so you might consider putting that in <p> or <div> tags, as that might also solve the issue (I didn't try that).

In any case, I'm pretty sure it has nothing to do with MathJax specifically.

Davide

PS, I agree with Murray that the button names are confusing.  You may want to change them to "Toggle Answer", or have the onclick function change the name from "Show Answer" to "Hide Answer" (and back again after a second click).  Similarly for "Show Explanation".  It might be easier to use <details> tags for these rather than managing your own buttons.

-- 
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/6c5c24ec-34cc-4ca8-88ce-bc096f1e4f57n%40googlegroups.com.