Page MenuHomePhabricator

Minerva img inside a thumbnail has no border, even though thumbinner dimensions always assume so
Closed, DuplicatePublic

Description

I notice that in Minerva, the img elements inside thumbnails have no border. However the dimensions of thumbinner always assume the presence of a border.

A thumbnail image in Minerva therefor always has an unexpected 2 pixel wide padding on the right side of the image.

This should be corrected (and the fix should be documented so we know why it's there).

Event Timeline

ovasileva triaged this task as Medium priority.Mar 2 2017, 3:17 PM
ovasileva added subscribers: Nirzar, ovasileva.

@TheDJ - do you think this is related to T153840: Image sticks out underneath the container (I doubt it, since this is about Minerva, but just wanted to double-check). Also, do you have a screenshot? @Nirzar - could you look at this? Any chance it's by design?

Eh, no this has nothing to do with popups.


Screenshot of minerva on desktop (aka without lazy loaded images). Colored the background of the page black, then enforced white background on thumbinner. Enlarged several times.

You can see that the 222 vs 220 dimensions cause a 1px left over space on both sides. This is not a very significant problem, but can cause slight layout differences in less standard cases. Take for instance the case with lazyloaded images. The 2px are now no longer spaced on the left and the right, but both on the right.

Better to just define a 1px transparent border I think

I can still reproduce this on https://en.m.wikipedia.org/wiki/Grosvenor_House_Hotel and other pages.

<div class="thumbinner" style="width: 222px;">
  <a href="/wiki/File:Grosvenor_House_Hotel_1920s_001.jpg" class="image view-border-box">
    <noscript>..</noscript>
    <img class="thumbimage image-lazy-loaded" width="220" .. style="width: 220px;height: 128px;">
  </a>
  <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Grosvenor_House_Hotel_1920s_001.jpg" class="internal" title="Enlarge"></a></div>
Grosvenor House Hotel. 1920s postcard illustration</div>
</div>

The bug isn't easy to notice but when inspected you'll notice the text around the image is pushed away further than it otherwise would be. Perhaps this is something to address in the MobileFrontend HTML filter/formatter?

Alternatively, we could try and fix this in MediaWiki core if we can find a way to not need those with specificaitons on the thumb element, which have always looked odd to me. @TheDJ Do you recall what they're for? My assumption is that they exist because standard float would allow the caption to exceed the width of the thumbnail based on the browser's native heuristics. In which case the various resize styles MobileFrontend has that override the <img> dimensions probably already cause problems here in various other ways as well due to the container not updating.

What if we added a transparent border to these images e.g.

1px solid transparent

Would that solve the issue?

(although I definitely think there is a bug in the core implementation. The parser should have no knowledge of how it is going to be rendered. . is there a bug for that? )

Actually after investigating this I'm not sure I understand this bug at all.

The bug isn't easy to notice but when inspected you'll notice the text around the image is pushed away further than it otherwise would be. Perhaps this is something to address in the MobileFrontend HTML filter/formatter?

Define "than it otherwise would be"
After we changed the lazy loading implementation, I'm not seeing any reflows relating to this and not really seeing anything that is going to impact our users in any way. It feels more nitpicky at this point than a bug unless I'm missing something.

We can apply

margin-right: -2px;

to the img if we are unhappy about the 2px space on the right of the image but rather than adding a hack I'd prefer to see us removing this assumption from the parser. I'd we decline this bug in favour of doing that (is there a bug open?). Otherwise, other skins who decide to remove borders on thumbnails are going to hit the same problems.

Jdlrobson lowered the priority of this task from Medium to Low.May 3 2017, 9:37 PM

Agreed. Let's close this in favour of a core bug to remove the assumption that images should have a 1px border.