Page MenuHomePhabricator

Spike 2h: Certain browser extensions result in 2 math images on mobile view
Closed, ResolvedPublic


During investigation of T143768 we discovered that certain browser extensions, for example MathML, result in output of 2 math equations being loaded on the mobile site as a result of lazy loaded images.

To replicate:

Is there anything we can do to remedy this?

Event Timeline

Jhernandez renamed this task from Certain browser extensions result in 2 math images on mobile view to Spike 2h: Certain browser extensions result in 2 math images on mobile view.Sep 7 2016, 3:37 PM
Jhernandez triaged this task as Medium priority.
Jhernandez added a project: Spike.
Jhernandez moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
ovasileva raised the priority of this task from Medium to High.Sep 15 2016, 2:40 PM

Maybe the diversity of platforms on mobile is not as huge as for desktop, and there is a way to figure out if the client supports mathml.
In that case the fallback image should not be displayed at all.
Especially on pages with many formulae it makes a big difference for example on edge connections. With MathML on the page is just there (the mathml is in the dom anyhow). Without MathML every single image needs to be loaded indvidually and the overall amout of data to be transferred is much higher.

In reply to your comment
@Jdlrobson the FF extension is only one of a few alternatives that use that mechanism. There are corresponding for Chrome (using MathJax) and other browsers. It's documented here and here

@Jdlrobson I just realize that there is no problem with duplicated math images in previw mode. cf.

Do you understand why that looks better?

@Physikerwelt I suspect preview mode doesn't use lazy loading images.

Is this only for users of the mobile site on desktop?

Yup only desktop browsers who have opted into browser extensions. I ended up investigating this issue out of interest (effectively doing the spike... feel free to pull into sprint @ovasileva if you want to get a final answer)

Looking at the code

.mwe-math-mathml-inline + .mwe-math-fallback-image-inline,
.mwe-math-mathml-display + .mwe-math-fallback-image-display {
    display: none !important;

We can fix this by doing 2 things

  1. moving the noscript after the lazy loaded image, so that the placeholder is now an adjacent sibling.
  2. copying the class "mwe-math-fallback-image-display" from data-class to the element .lazy-image-placeholder
<Div class="lazy-image-placeholder loaded" data-class="mwe-math-fallback-image-inline"></div>

#2 is the tricky bit. We can deploy a hack that whitelists this class or explore what happens when we use replaceWith rather than appendTo (I forget why we decided to use appendTo but I think there was a good reason).

@bmansurov what do you think?

I don't remember either. If we end up working on the task, I think it's worth finding out.

Another approach is that we submit a patch to and add the selector. Looks straight forward but last commit was April 2016. Although this fix may help that extension it may not help others.

@Jdlrobson I'm happy to help. The overall goal is that people can read formulae as integral parts of the text. Especially on mobile it's a huge advantage to load a page with only one request instead of a few hundert requests (which is the case for pages with many math expressions in it). If you are aware of other ways to determine if a mobile client supports mathml that would also be an option.

@Jdlrobson @fredw is still actively maintaining the package as far as I know... how would you change the selector?

Le 08/02/2017 Γ  19:13, Physikerwelt a Γ©crit :

Physikerwelt added a subscriber: fredw.
Physikerwelt added a comment.

@Jdlrobson @fredw is still actively maintaining the
package as far as I know... how would you change the selector?

Adapting the CSS and updating the extension would be straightforward,
hopefully this can be done in a backward compatible way (i.e. the new
version of the addon would still work will previous versions of mediawiki).

Similar CSS is used in the mediawiki doc, Safari extension etc so they
would need to be updated too.

Great! I've submitted a patch that should fix this issue in this particular extension:

Thanks for the merge! I've added this to a sign off column simply as a reminder to test the new release fixes this.

Jdlrobson claimed this task.

I have verified this works.