Change 309409 had a related patch set uploaded (by Jdlrobson):
Copy height and width attributes from style to lazy placeholder

https://gerrit.wikimedia.org/r/309409

I'm out tomorrow at an all day Wikimedia event. If there's any issues with the patch please take it over. We should aim to get this live by next week so it's not reported post blog post.

In T145222#2635593, @Jdlrobson wrote:

I'm out tomorrow at an all day Wikimedia event. If there's any issues with the patch please take it over. We should aim to get this live by next week so it's not reported post blog post.

Delaying publishing a blog post is less risky than rushing a fix into production. We'll do what we can 🙂

In T145222#2636674, @phuedx wrote:

There's a minor bug in rEMFR0b0fc2a2bca9: Copy height and width attributes from style to lazy placeholder where img elements like

<img src="..." alt="Foo" />

...

As I've noted in my review, this is the case for all of the images generated by Math on our staging server.

Thanks Sam for the catch and fix up!

We need to take the time to get the staging server using Mathoid to render equations. I'm also a little concerned that, by default, equations are rendered without dimensions.

There's not been much activity on this since Wednesday where Sam identified a bug that is now fixed. We continue to load these images unnecessarily and I'm keen to rectify this asap given a blog post goes out today drawing more attention to this work.

Can someone explicitly state what is blocking them from reviewing this and how concretely I can help? Right now I'm a little lost.

I've enabled the math role on the staging server and configured it to use the Mathoid server available at formulasearchengine.com.

rEMFR32a9ad20befc: Get height and width from style to placeholder is working as expected.

Unfortunately, rEMFR33689eccda81: Treat list items as inline causes placeholders for equations to have display: inline applied to them, leaving the width and height rules ignored, and, consequently, untouchable by the lazy image loader.

Consider the markup for "inline" and "block" equations:

<span>

  <span class="mwe-math-mathml-inline mwe-math-mathml-a11y" style="display: none;">
    <math xmlns="http://www.w3.org/1998/Math/MathML"><!-- ... --></math>
  </span>
  <noscript><!-- ... --></noscript>
  <span class="lazy-image-placeholder" style="width: 4.679ex;height: 2.509ex;" data-src="https://api.formulasearchengine.com/v1/media/math/render/svg/957584ae6a35f9edf293cb486d7436fb5b75e803" data-alt="{\displaystyle \lambda _{\max }}" data-class="mwe-math-fallback-image-inline"></span>

</span>

<dl>
  <dd>
    <span>

      <span class="mwe-math-mathml-inline mwe-math-mathml-a11y" style="display: none;">
        <math xmlns="http://www.w3.org/1998/Math/MathML"><!-- ... --></math>
      </span>
      <noscript><!-- ... --></noscript>
      <span class="lazy-image-placeholder" style="width: 10.271ex;height: 5.343ex;" data-src="https://api.formulasearchengine.com/v1/media/math/render/svg/c7864b3550dd5ccca92ae55314e0b00c9bacc3e0" data-alt="{\displaystyle \lambda _{\max }={\frac {b}{T}}}" data-class="mwe-math-fallback-image-inline"></span>

    </span>
  </dd>
</dl>

In both cases the span .lazy-image-placeholder applies.

Sam which article are you testing this on? I can't find any here - http://reading-web-staging.wmflabs.org/wiki/Special:Contributions/Phuedx

In T145222#2652692, @Jdlrobson wrote:

Sam which article are you testing this on? I can't find any here - http://reading-web-staging.wmflabs.org/wiki/Special:Contributions/Phuedx

http://reading-web-staging.wmflabs.org/wiki/Black-body_radiation

P.S. Who's "Sam"?

@Jdlrobson, re: https://phabricator.wikimedia.org/T144567#2650579 - what were you thinking in terms of exploratory testing?

@Jdlrobson: I've submitted a new patchset of rEMFRa698ca513786: Get height and width from style to placeholder, which uses DOMDocument#createEntityReference as you suggested in your comments and I've tested it locally using an almost identical setup to our staging server's.

@phuedx I'm not seeing the nbsp character in the raw HTML for http://reading-web-staging.wmflabs.org/w/index.php?title=Black-body_radiation&mobileaction=toggle_view_mobile nor locally. This was the issue I was having with using createEntityReference

Is it being encoded by a unicode character and is that why it has been confusing me?

@phuedx seems it's not unicode and it's not working because of the above.
http://reading-web-staging.wmflabs.org/w/index.php?title=Black-body_radiation&mobileaction=toggle_view_mobile
In the section under the heading "Virtual temperature of Earth" - no images will load.

This is why I was resorting to JS there is something weird going on in the formatter.

https://phabricator.wikimedia.org/T146298 < raised a bug for remaining Math issues.

Patch has +1s from @phuedx @jhobs and myself. Jenkins failures are due to the module ready bug that's also in flight, but we should be able to merge regardless since those are intermittent. Anyone care to hit the +2 button?

In T145222#2657170, @Jdlrobson wrote:

Patch has +1s from @phuedx @jhobs and myself. Jenkins failures are due to the module ready bug that's also in flight, but we should be able to merge regardless since those are intermittent. Anyone care to hit the +2 button?

/cc @bmansurov @Jhernandez

Merges are being blocked by T146324

Change 309409 merged by jenkins-bot:
Get height and width from style to placeholder

https://gerrit.wikimedia.org/r/309409

I'm moving this into Needs QA as rEMFR1ac2bf5688fc: Get height and width from style to placeholder affects a user-facing feature. While the change will need to be signed off by a developer (@Jhernandez), I think it's worth asking TSG to take a look at the lazily-loaded images feature beforehand.

@phuedx, @Jdlrobson - testing criteria? (or maybe just lazy-loading exploratory testing criteria?)

Device/app specs:

1. iOS 10.0.1, iPhone 6s, app 5.2.1 (942) - Safari
2. Galaxy Express 3 (Android 6.0.1), app 2.4.156-alpha-2016-09-21 - Chrome

All images load in the Black-body_radiation article - the inline equations take longer than the other images to load but they eventually do load within a few seconds of being scrolled at in the article.