Page MenuHomePhabricator

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

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

YBG created this task.Feb 27 2017, 12:45 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 27 2017, 12:45 AM
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)
YBG updated the task description. (Show Details)Mar 1 2017, 5:27 AM
ovasileva triaged this task as Normal priority.Mar 3 2017, 1:28 PM
ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
Jc86035 added a comment.EditedMar 14 2017, 1:06 PM

@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.

Jc86035 added a subscriber: TheDJ.Mar 14 2017, 1:14 PM

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

Jdlrobson updated the task description. (Show Details)Apr 8 2017, 12:27 AM

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

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

Jdlrobson added a subscriber: Jdlrobson.

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

YBG updated the task description. (Show Details)Apr 20 2017, 11:48 PM

I am still seeing this issue.
Mobile:


Desktop:

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

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

YBG added a comment.Apr 26 2017, 5:09 PM

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

YBG added a comment.Apr 26 2017, 5:26 PM

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

Thanks @YBG - that's most helpful! :)

YBG added a comment.Apr 27 2017, 12:41 AM

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

ABorbaWMF closed this task as Resolved.Apr 27 2017, 10:33 PM

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:

Here are some screens showing UC Browser:

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