Page MenuHomePhabricator

[Bug] Gallery next / previous buttons should have a drop shadow or contrast with the background
Closed, ResolvedPublic2 Estimated Story Points

Description

Steps to Reproduce

  1. Go to https://en.m.wikipedia.org/wiki/Barack_Obama#/media/File%3AElectoralCollege2008.svg
  2. Resize the window so that the advance / former buttons appear over the image

Expected Results

  • The buttons are always visible

Actual Results

  • The buttons are lost in the background; white images aren't that uncommon!

Screenshot from 2018-06-13 08-17-17.png (805×1 px, 223 KB)

Environments Observed

  • enwiki

Browser Version

  • Chromium v66.0.3359.181

OS Version

  • Ubuntu v18.04 64b

Device Model

  • Desktop

Device Language

  • English

Acceptance criteria

Add filter following the spec in https://phabricator.wikimedia.org/T197106#4302906
Note, there may be a problem with supporting IE11 https://caniuse.com/#feat=css-filters so feature queries may be useful.

QA instructions

  1. go to http://reading-web-staging.wmflabs.org/wiki/Barack_Obama#/media/File%3AElectoralCollege2008.svg
  2. resize your window so that the back/forth arrows are on top of the image
  3. verify that the back/forth arrows have a dark shadow, and are still visible when on top of image
  4. resize your window so that the X icon is on top of the image (you may need to go to a different image)
  5. verify that the X icon has a dark shadow, and is still visible when on top of image

Event Timeline

Niedzielski renamed this task from [Bug] Gallery next / previous buttons have a drop shadow or contrast with the background to [Bug] Gallery next / previous buttons should have a drop shadow or contrast with the background.Jun 15 2018, 9:59 PM

Great catch. Here it is on a few different images with filter: drop-shadow( 0px 0px 4px rgba(0,0,0,0.8) ); applied to the arrows:

Screen Shot 2018-06-20 at 10.36.05 AM.png (659×925 px, 166 KB)

Screen Shot 2018-06-20 at 10.35.32 AM.png (659×925 px, 551 KB)

Screen Shot 2018-06-20 at 10.35.15 AM.png (658×927 px, 186 KB)

Screen Shot 2018-06-20 at 10.35.52 AM.png (659×927 px, 143 KB)

Also, not sure if we can justify fixing this in the same ticket (maybe we can generalize this to issues with white bg images?), but I noticed that we need to add a border-top to the details panel at the bottom of the mediaviewer.

details-panel-border.jpg (755×1 px, 672 KB)

ovasileva set the point value for this task to 2.Jun 20 2018, 4:29 PM
Vvjjkkii renamed this task from [Bug] Gallery next / previous buttons should have a drop shadow or contrast with the background to 53aaaaaaaa.Jul 1 2018, 1:04 AM
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii removed the point value for this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from 53aaaaaaaa to [Bug] Gallery next / previous buttons should have a drop shadow or contrast with the background.Jul 2 2018, 12:28 PM
CommunityTechBot lowered the priority of this task from High to Medium.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot set the point value for this task to 2.
CommunityTechBot added a subscriber: Aklapper.

Moving to board because this is a good on-boarding task

Change 444645 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Fix Media Gallery buttons / detail panel contrast

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

Added the filter drop-shadow to address the button contrast bug as well as a border-top to the details panel, but as noted in the description, this filter won't work in IE11. The description suggested using feature queries, but I'm having trouble thinking of an effective use of this. If this is an issue, would it be viable to have a new svg with a shadow?

Technically, we support IE11 (see https://www.mediawiki.org/wiki/Compatibility) as a grade A browser. That said, in this case it doesn't seem like a major problem, not to style this in IE11 (@alexhollender is it?)

The description suggested using feature queries, but I'm having trouble thinking of an effective use of this.

I think the intention was just to limit the rule to not work in IE11 as IE11 also doesn't support feature queries. This would mean you could provide a suboptimal rendering in IE11.

I'd first check to what level we want to support IE11, but it would be useful to know what options we have other than shipping a new icon (if any). https://github.com/Schepp/CSS-Filters-Polyfill may provide some inspiration.

in this case it doesn't seem like a major problem, not to style this in IE11

I'm fine with not supporting this in IE11

@alexhollender I implemented the border-top for the details panel you suggested. Was there a particular gray you wanted for that?:

@colorGray1: #000; darkest
@colorGray2: #222;
@colorGray4: #444;
@colorGray5: #54595d;
@colorGray7: #72777d;
@colorGray10: #a2a9b1;
@colorGray12: #c8ccd1;
@colorGray14: #eaecf0;
@colorGray15: #f8f9fa;
lightest

@nray rad, let's go with @colorGray12: #c8ccd1;

Change 444645 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Fix Media Gallery buttons / detail panel contrast

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

QA steps:

  1. Go to https://readers-web-master.wmflabs.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile#/media/File%3ABarack_Obama_signature.svg
  2. Resize the window so that the advance / former buttons appear over the image
  3. Ensure the navigation buttons are always visible!
ovasileva added a subscriber: ovasileva.

looks good! Thanks @nray!

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 13 2018, 6:39 PM