Formulæ displayed twice in Facebook Messenger

[tacsipacsi]

Both of them are textual, i.e. not images like the default behavior on Wikipedia. The first one seems to be the MathJax version with its random background color when selecting it.

[fred-wang]

Thanks for the report. It would be good to have the source code with HTML/CSS source. Even better if one can submit a patch.

[tacsipacsi]

This is what I got from the developer console for the above Facebook message (reformatted for better readability):

<span class="katex-display">
    <span class="katex">
        <span class="katex-mathml">
            <math>
                <semantics>
                    <mrow>
                        <mstyle mathcolor="#fff">
                            <mrow>
                                <mover accent="true">
                                    <mrow>
                                        <mrow>
                                            <mi mathvariant="double-struck">R</mi>
                                        </mrow>
                                    </mrow>
                                    <mo stretchy="true">‾</mo>
                                </mover>
                                <mo>=</mo>
                                <mrow>
                                    <mi mathvariant="double-struck">R</mi>
                                </mrow>
                                <mo>∪</mo>
                                <mo>{</mo>
                                <mo>−</mo>
                                <mi mathvariant="normal">∞</mi>
                                <mo separator="true">,</mo>
                                <mo>+</mo>
                                <mi mathvariant="normal">∞</mi>
                                <mo>}</mo>
                            </mrow>
                        </mstyle>
                    </mrow>
                    <annotation encoding="application/x-tex">\color{#fff}{ \overline{\mathbb{R}} = \mathbb{R} \cup \{ -\infty, +\infty \} }</annotation>
                </semantics>
            </math>
        </span>
        <span class="katex-html" aria-hidden="true">
            <span class="strut" style="height: 1.88889em;"></span>
            <span class="strut bottom" style="height: 1.13889em; vertical-align: -0.25em;"></span>
            <span class="base">
                <span class="mord" style="color: rgb(255, 255, 255);">
                    <span class="mord overline" style="color: rgb(255, 255, 255);">
                        <span class="vlist-t">
                            <span class="vlist-r">
                                <span class="vlist" style="height: 0.88889em;">
                                    <span class="" style="top: -3em;">
                                        <span class="pstrut" style="height: 3em;"></span>
                                        <span class="mord" style="color: rgb(255, 255, 255);">
                                            <span class="mord" style="color: rgb(255, 255, 255);">
                                                <span class="mord mathbb" style="color: rgb(255, 255, 255);">R</span>
                                            </span>
                                        </span>
                                    </span>
                                    <span class="" style="top: -3.80889em;">
                                        <span class="pstrut" style="height: 3em;"></span>
                                        <span class="overline-line" style="color: rgb(255, 255, 255); border-bottom-width: 0.04em;"></span>
                                    </span>
                                </span>
                            </span>
                        </span>
                    </span>
                    <span class="mrel" style="color: rgb(255, 255, 255);">=</span>
                    <span class="mord" style="color: rgb(255, 255, 255);">
                        <span class="mord mathbb" style="color: rgb(255, 255, 255);">R</span>
                    </span>
                    <span class="mbin" style="color: rgb(255, 255, 255);">∪</span>
                    <span class="mopen" style="color: rgb(255, 255, 255);">{</span>
                    <span class="mord" style="color: rgb(255, 255, 255);">−</span>
                    <span class="mord mathrm" style="color: rgb(255, 255, 255);">∞</span>
                    <span class="mpunct" style="color: rgb(255, 255, 255);">,</span>
                    <span class="mord" style="color: rgb(255, 255, 255);">+</span>
                    <span class="mord mathrm" style="color: rgb(255, 255, 255);">∞</span>
                    <span class="mclose" style="color: rgb(255, 255, 255);">}</span>
                </span>
            </span>
        </span>
    </span>
</span>

.katex-mathml directly gets the following styles:

/* https://static.xx.fbcdn.net/rsrc.php/v3/yQ/l/0,cross/RxAUOcNVfFB.css:2 */
#facebook ._3_3l .katex .katex-mathml, ._3_3l .katex .katex-mathml {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* https://static.xx.fbcdn.net/rsrc.php/v3/yi/l/0,cross/Ts4dhnZz4tJ.css:32 */
#facebook ._-kb span {
    font-family: inherit;
}

/* moz-extension://c2947f4a-2c90-4156-a85f-ac3cb4ddfaa8/content-scripts/katex.css:19 */
.katex .katex-mathml {
    position: static !important;
    clip: auto;
    height: auto !important;
    width: auto !important;
    overflow: visible;
}

.katex-html:

/* https://static.xx.fbcdn.net/rsrc.php/v3/yQ/l/0,cross/RxAUOcNVfFB.css:2 */
#facebook ._3_3l .katex .katex-html, ._3_3l .katex .katex-html {
    display: inline-block;
}

/* https://static.xx.fbcdn.net/rsrc.php/v3/yi/l/0,cross/Ts4dhnZz4tJ.css:32 */
#facebook ._-kb span {
    font-family: inherit;
}

/* moz-extension://c2947f4a-2c90-4156-a85f-ac3cb4ddfaa8/content-scripts/katex.css:26 */
.katex .katex-html {
    display: none;
}

[tacsipacsi]

It seems that Facebook’s display: inline-block overrides the extension’s display: none for .katex-html.

[fred-wang]

@tacsipacsi Thanks. It seems to be very similar to https://github.com/fred-wang/webextension-native-mathml/pull/3 ; can you please the latest version of the addon?

[tacsipacsi]

I’ve just updated to v1.9.3, and the problem seems to persist.

[fred-wang]

cc @auscompgeek

[fred-wang]

Maybe on #3 we wanted the !important rule at the end... Can someone check and send a PR? thanks!

[auscompgeek]

3 was about websites doubly hiding the MathML. This appears to not be the case here at all, and is in fact the exact opposite problem.

This is just Facebook having more important styles than what was here already.

I recall this is a long standing issue too.