Page MenuHomePhabricator

Bug with Template:nowrap on the mobile site.
Closed, ResolvedPublic

Description

There is a bug with the nowrap template when around text and a flagicon template or an image in a table. It will cause the text it is put around to spill over from one column into another. I suspect it is being caused by the image being ignored altogether or being treated as just a 1px character. I have opened a discussion on the matter at WP:VPT which includes screenshots of the problem, which you can find here: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Table_cell_contents_spilling_over. .

Event Timeline

Tvx1 raised the priority of this task from to Medium.
Tvx1 updated the task description. (Show Details)
Tvx1 added a project: Mobile.
Tvx1 subscribed.
Tvx1 set Security to None.

It seems, that the flag/image or the link around it is a problem, that causes this :/

Is anyone going to take a look a this?

This is due to the mobile skin setting:

.content a > img {
    max-width: 100% !important;
}

So nowrap is asking the child: how big do you want to be ? And the image is saying "no bigger than you are". And you have a sizing conflict.

I'm not sure what that CSS line is needed for however. If I disable it I don't see obvious breakages. someone should probably dig into the history to find out why it was added.

TheDJ lowered the priority of this task from Medium to Lowest.Jun 2 2015, 9:00 AM

That CSS is needed to prevent horizontal scrolling on the page on small devices.

you mean horizontal scrolling, in case that there are images that stretch beyond the width of the available content ? OK.

Well then this problem can't be easily fixed I think.

To prevent horizontal scrolling? Whenever I come across a table or image that is to wide to fit on the screen on my mobile device I can scroll horizontally. So that is not being prevented at all currently.

Tvx1 raised the priority of this task from Lowest to Medium.Jun 8 2015, 9:56 PM
TheDJ lowered the priority of this task from Medium to Lowest.Jun 10 2015, 2:25 PM

Please don't change priority levels. Priorities are NOT set by reporters of problems. See also our Phabricator help.

Priority has nothing to do with the reality of a problem or the desirability of a fix. Instead it indicates an assessment by someone that takes part in, or is experience with the development proces, and indicates such a persons assesment of a combination of criteria like: audience impact, criticality of solving it in relation to the many other tickets that we have, available resources etc.

A visual glitch in a few % of the pages, presenting just on the mobile platform, simply doesn't get a high priority if there is not an easily rollable fix for it.

@kaldari, was this CSS rule perhaps added specifically to deal with things like Template:Wide_image ?

I didn't give it at high priority at all.

So it's there anyone else who has an idea on how this could be solve? I get that the offending CSS cannot be removed entirely (Although that has not been actually confirmed, I mean I still don't see how it prevents horizontal scrolling). But couldn't it be altered so that, in @TheDJ's word, when the nowrap asks the child how big it wants to be, it responds with the size it has actually been coded to be in the article's coding?

Jdlrobson changed the task status from Open to Stalled.Jul 16 2015, 4:49 AM

As @TheDJ explains the nowrap class is asking the content not to be wrapped and the space available is not enough so it spills out into the second column.

To explain why the rule exists:
Given an image has been defined by an editor as needing width 500px - on a mobile display typically the width of the screen is 320px so we have to say, although you want to be 500px width you can only be a max-width:100%. Unfortunately due to the way templates/images are setup there is no way for editors to say 500px is a suggested width and what to do on a smaller display (that's a much bigger problem and I'm not sure where to start with fixing that).

The fact it is performing strange in the table cell is probably a browser quirk and the table cell is reacting to the image width.

To avoid this either here are three suggested solutions:

  1. stop using the nowrap class as @TheDJ suggests
  2. add padding-right: 24px to the element to account for the image icon which appears to be consistently 24px.
  3. add style="max-width:none;" to the images in question since we know these icons are never going to cause issues with mobile rendering.

I'll let the community decide the best course of action here.

Thanks very much. That was very helpful @Jdlrobson. I can't seem to get suggestion 3 to work, but suggestions 2 works perfectly.

TheDJ claimed this task.