Page MenuHomePhabricator

Regression: Math fallback images are rendering extremely small on mobile
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
dandavison7
Nov 4 2016, 7:45 PM
Referenced Files
F7799092: image.png
Apr 27 2017, 10:47 PM
F7799088: image.png
Apr 27 2017, 10:47 PM
F7799099: image.png
Apr 27 2017, 10:47 PM
F7799110: image.png
Apr 27 2017, 10:47 PM
F7799084: image.png
Apr 27 2017, 10:47 PM
F7799095: image.png
Apr 27 2017, 10:47 PM
F5050500: MobileFrontend small formulas
Dec 13 2016, 6:58 PM
F4819226: T150052 iPad mini Algebraically_closed_field Opera Mini.PNG
Nov 21 2016, 6:26 PM
Tokens
"Cup of Joe" token, awarded by Coffee.

Description

Math formulas / formulae on Wikipedia pages are rendering extremely small on ipads and Android devices with multiple browsers.

This can be replicated on Browserstack with:

  • os_version=7.0
  • device=iPad Mini 2
  • Browser: Safari

Example page: https://en.wikipedia.org/wiki/Sequential_quadratic_programming

I'm seeing the same problem in two ipads: one with a newer "retina" style display and one older pre-retina. I've tried two different browser applications (safari and firefox).

Example screenshot attached from Safari in the retina model ipad.

IMG_0024.PNG (2×1 px, 225 KB)

Other example:

MobileFrontend small formulas (854×480 px, 119 KB)

steps to reproduce:

  1. view the articles https://en.wikipedia.org/wiki/Sequential_quadratic_programming and https://en.wikipedia.org/wiki/Algebraically_closed_field on os_version=7.0, device=iPad Mini 2, Browser: Safari (from Thursday 27th)
  2. Note the appearance of math images through each article
  3. Note any deviations from normal appearance

Event Timeline

The retina and non-retina ipads are running iOS 8.3 (12F69) and 8.4.1 (12H321) respectively.

This is caused by the lazy loaded images on mobile.. T124770: Feature flagged Lazily load images

It seems that the style attribute isn't moved into the child element, but instead remains on the lazy-image-placeholder element, where they basically don't apply (because you can't assign width and height to an inline span element and they are not inherited by child img elements).

<span class="lazy-image-placeholder loaded" style="width: 50.819ex;height: 11.509ex;" data-src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e1ba709c651d23276fe5da94800f5a931101d2b5" data-alt="\begin{array}{rl} \min\limits_{d} &amp; f(x_k) + \nabla f(x_k)^Td + \tfrac{1}{2} d^T \nabla_{xx}^2 \mathcal{L}(x_k,\lambda_k,\sigma_k) d \\
\mathrm{s.t.} &amp; b(x_k) + \nabla b(x_k)^Td \ge 0 \\
  &amp; c(x_k) + \nabla c(x_k)^T d = 0. \end{array}" data-class="mwe-math-fallback-image-inline"><img class="mwe-math-fallback-image-inline" src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e1ba709c651d23276fe5da94800f5a931101d2b5" alt="\begin{array}{rl} \min\limits_{d} &amp; f(x_k) + \nabla f(x_k)^Td + \tfrac{1}{2} d^T \nabla_{xx}^2 \mathcal{L}(x_k,\lambda_k,\sigma_k) d \\
\mathrm{s.t.} &amp; b(x_k) + \nabla b(x_k)^Td \ge 0 \\
  &amp; c(x_k) + \nabla c(x_k)^T d = 0. \end{array}"></span>
TheDJ renamed this task from Math is rendering extremely small on ipads to Regression: Math is rendering extremely small on ipads.Nov 7 2016, 9:47 AM
TheDJ triaged this task as Medium priority.

Also partially caused by the images using style attributes to set width/height, instead of using width/height attributes in pixels, which might relate to T146298: Certain pages have reflows due to lazy loaded images (possibly due to downscaling via max-width: 100%).

TheDJ renamed this task from Regression: Math is rendering extremely small on ipads to Regression: Math fallback images are rendering extremely small on mobile.Nov 7 2016, 9:52 AM
ovasileva added a subscriber: Nicholas.tsg.

@Nicholas.tsg - added steps to reproduce in task description

Screencaps from testing on iPad Air 2 (iOS 10.0.1):

Algebraically_closed_field Firefox

T150052 iPad Air 2 Algebraically_closed_field Firefox.PNG (2×1 px, 357 KB)

Algebraically_closed_field Safari

T150052 iPad Air 2 Algebraically_closed_field Safari.PNG (2×1 px, 343 KB)

Sequential_quadratic_programming Firefox

T150052 iPad Air 2 Sequential_quadratic_programming Firefox.PNG (2×1 px, 254 KB)

Sequential_quadratic_programming Safari

T150052 iPad Air 2 Sequential_quadratic_programming Safari.PNG (2×1 px, 313 KB)

While the maths are rendering much larger again than they were in the original screencap in the description, please let me know if I should check more iPad models (and/or browser apps) before confirming this as fixed.

If you're referring to a fix that has not been released to the public then please ignore this message.

I'm still seeing small images (I checked this isn't client-side caching by accessing pages I've never accessed before.) This is on both of the following systems:

iOS 8.3 (12F69) on an Apple iPad Air ME993LL/A
iOS 8.4.1 (12H321) on an older pre-retina ipad MC769LL/A

Algebraically_closed_field Safari

Algebraically_closed_field__Safari (2×1 px, 365 KB)

@Nicholas.tsg - Based on the comment above it seems the bug might be showing in different versions of iOS. Could you check some older versions? iOS 8.3 and perhaps on Android as well? Thank you!

I do not have access to an iOS 8 device anymore. Firefox no longer supports iOS 7 which I do have. Screencaps from testing on iPad Mini (iOS 7.1.2):

Algebraically_closed_field Safari

T150052 iPad mini Algebraically_closed_field Safari.PNG (2×1 px, 247 KB)

Algebraically_closed_field Chrome

T150052 iPad mini Algebraically_closed_field Chrome.PNG (2×1 px, 236 KB)

Algebraically_closed_field Opera Mini

T150052 iPad mini Algebraically_closed_field Opera Mini.PNG (2×1 px, 264 KB)

ovasileva set the point value for this task to 5.Dec 14 2016, 4:22 PM

This task is probably also related even though it's not a duplicate. T143489

@TheDJ do you have an option to figure out if that's still a problem and do you have an idea to whom this task could be assigned?

@ovasileva can you schedule this task for being addressed? I'm happy to help, with math specific questions, but I'm not familar with the mobile extension.

@Physikerwelt - it's currently in our sprint + 1 column, meaning we will be able to get to it in our next sprint, or the one following that (within the next month - 1.5 months)

@ovasileva oh sorry I did not know that. I just saw that that the sprint 87 label was removed in Dec.

Whenever a full ETC is available, can someone post it here? Just need to be able keep some of our customers informed. (Wikimedia OTRS)

Jdlrobson subscribed.

This is indeed related to lazy loading images.

ABorbaWMF subscribed.

Appears to be fixed when testing on the production site using the example URLs. Also tried a few other articles. Tested on iPad 2 Retina with iOS 10.2.1

On Samsung Galaxy Mini formulas are still the same size. But I noticed formulas in the beginning of an article are bigger, just only formulas inside chapters are loaded incorrectly small

The change has not yet been deployed but will be on English Wikipedia on Thursday.

Appears to be fixed. Tested on a few different ios and android devices.

image.png (1×1 px, 257 KB)
image.png (1×768 px, 285 KB)
image.png (1×1 px, 243 KB)
image.png (996×600 px, 294 KB)
image.png (960×540 px, 177 KB)
image.png (1×720 px, 304 KB)