Page MenuHomePhabricator

Lazy loaded images turn inline images into block images
Closed, ResolvedPublic

Assigned To
Authored By
YBG
Feb 27 2017, 12:45 AM
Referenced Files
F7798964: image.png
Apr 27 2017, 10:33 PM
F7798956: image.png
Apr 27 2017, 10:33 PM
F7798951: image.png
Apr 27 2017, 10:33 PM
F7745909: image.png
Apr 25 2017, 1:13 AM
F7745914: image.png
Apr 25 2017, 1:13 AM

Description

The mobile view https://test2.m.wikipedia.org/w/index.php?title=User_talk:YBG&oldid=310902 has two identical lines with inline images. The first, in the lede section, is laid out correctly. The second one, after the first section header, is laid out with each image and each span of text as a separate left-aligned block.

In desktop view https://test2.wikipedia.org/w/index.php?title=User_talk:YBG&oldid=310902, both lines are laid out identically as expected with the images in line.

This was originally observed inside a table header spanning all columns ( ! colspan=6 | ... ), but it turns out that the table has nothing to do with the problem.

The cause is that lazy-loaded images make the incorrect assumption that all images are block content, but this is not a correct assumption. Please follow the definitions of core, or just don't wrap the lazy loaded image.

Other example:
T159222

Event Timeline

Reedy renamed this task from Inline images after lede section laid in incorrectly in mobile view to Inline images after lead section laid in incorrectly in mobile view.Feb 27 2017, 12:08 PM
Reedy added a project: MediaWiki-Parser.
TheDJ renamed this task from Inline images after lead section laid in incorrectly in mobile view to Lazy loaded images turn inline images into block images.Feb 27 2017, 12:55 PM
TheDJ updated the task description. (Show Details)
ovasileva triaged this task as Medium priority.Mar 3 2017, 1:28 PM
ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog-Archived board.

@TheDJ: Is the solution to just remove the CSS from lazy-loaded images? I've tried it in Firefox's element inspector and removing the display:block CSS from the lazy-image-placeholder class seems to fix the problem.

Change 347137 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Mark images with width < 50 as inline

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

Change 347137 abandoned by Jdlrobson:
Mark images with width < 50 as inline

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

Jdlrobson subscribed.

This should be fixed by T162623 so let's track in backlog

I am still seeing this issue.
Mobile:

image.png (736×1 px, 123 KB)

Desktop:
image.png (736×1 px, 189 KB)

@Jdlrobson, I wasn't sure you caught this last update.

@ABorbaWMF the fix wont be live on enwiki until around thursday 3pm pst.

It is now fixed on test2.wikipedia.org. Thank you very much!!!!

Here's links to check in on enwiki:
https://en.m.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&oldid=777348158 mobile view - currently laid out incorrectly
https://en.m.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&oldid=777348158 desktop view - laid out correctly as it has always been

You are most welcome, @Jdlrobson. Thank YOU for fixing this!

Tested on android and ios devices, including phones and tablets. Found one small issue on the UC browser.

Passing Browsers:
Safari
Chrome
Firefox
Dolphin
Maxthon
Opera

Example:

image.png (1×720 px, 220 KB)

Here are some screens showing UC Browser:

image.png (1×768 px, 232 KB)

image.png (1×720 px, 291 KB)

Let me know if we should create a new bug for this. Resolving for now.