Page MenuHomePhabricator

Newcomer task: Suggested article image should be repeated when image width is less than card width
Open, Needs TriagePublicBUG REPORT

Description

This is a regression of T238282, and is occurring on Desktop and Mobile.

Expected:

Actual:

Event Timeline

RHo created this task.Feb 4 2020, 9:55 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 4 2020, 9:55 AM
RHo updated the task description. (Show Details)Feb 14 2020, 1:17 PM
RHo edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
RHo renamed this task from Newcomer task: Suggested article image should be repeated when image width is less than card width to [Bug] Newcomer task: Suggested article image should be repeated when image width is less than card width.Feb 14 2020, 1:25 PM
RHo updated the task description. (Show Details)
Tgr added a comment.Wed, Apr 1, 11:36 AM

Repeating the image looks weird and broken. Compare

with
.

RHo added a comment.Wed, Apr 1, 3:34 PM

Repeating the image looks weird and broken. Compare

with
.

I actually find not repeating the image and having the white gaps looks more weird and broken. We already had agreed to implement the repeat-x image on T238282 which is also why this is filed as a regression bug. While this example of a person's face being shown is not that common and looks admittedly a bit off, it is preferable in terms of it occurring occasionally, vs having the white gaps appear all the times the image doesn't fill card width.

HOWEVER, I would be really interested if we could slightly tweak the implementation so that a slight blur to the repeated side images:

Option 1: Blur added to the repeated images
Option 2: Same image covering the background and blurred

The second option is the standard when mobile portrait video is shown in a landscape video player (eg mobile videos on YouTube).

Tgr added a comment.Wed, Apr 1, 4:02 PM

Paging through a random topic, about half the non-fullwidth images where headshots where a part of the head got repeated, so I don't think it's that rare. And it's even more apparent when the background has a different color:

AFAIK there isn't any straightforward way to blur parts of the image only, but we could probably display a blurred version of the image with repeat-x or stretch, and then another unblurred instance on top of it. IE does not support CSS filters so the side images would appear unblurred, but I imagine we can live with that.

RHo added a comment.Wed, Apr 1, 4:07 PM

Paging through a random topic, about half the non-fullwidth images where headshots where a part of the head got repeated, so I don't think it's that rare. And it's even more apparent when the background has a different color:


AFAIK there isn't any straightforward way to blur parts of the image only, but we could probably display a blurred version of the image with repeat-x or stretch, and then another unblurred instance on top of it. IE does not support CSS filters so the side images would appear unblurred, but I imagine we can live with that.

Yes I found this stackoverflow post which is not so straightforward. +1 to this tweak with the option to blur the *stretched width* background image). Also, yes to using CSS filter: blur and living without it on IE.

Tgr added a comment.Wed, Apr 1, 5:11 PM

Which is your preferred option, stretch or repeat?

Tgr added a comment.Wed, Apr 1, 5:12 PM

I wonder if it's possible to repeat + flip horizontally. That would make the edges line up nicely.

Tgr added a comment.Wed, Apr 1, 6:54 PM

Here's a straightforward attempt, with filter:blur(5px). This looks pretty bad because the blur affects the image edge as well.


Can probably be fixed with SVG blur though, and that even works in IE.

RHo added a comment.Wed, Apr 1, 7:05 PM

Here's a straightforward attempt, with filter:blur(5px). This looks pretty bad because the blur affects the image edge as well.


Can probably be fixed with SVG blur though, and that even works in IE.

Thanks for drumming that up so quickly! My pref is stretched blur instead of this repeat since if that may reduce the edge blurring issue, combined with SVG blur.

kostajh renamed this task from [Bug] Newcomer task: Suggested article image should be repeated when image width is less than card width to Newcomer task: Suggested article image should be repeated when image width is less than card width.Thu, Apr 2, 1:43 PM
kostajh changed the subtype of this task from "Task" to "Bug Report".