Steps to Reproduce
- Go to https://en.m.wikipedia.org/wiki/Barack_Obama#/media/File%3AElectoralCollege2008.svg
- Resize the window so that the advance / former buttons appear over the image
- The buttons are always visible
- The buttons are lost in the background; white images aren't that uncommon!
- Chromium v66.0.3359.181
- Ubuntu v18.04 64b
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.
- go to http://reading-web-staging.wmflabs.org/wiki/Barack_Obama#/media/File%3AElectoralCollege2008.svg
- resize your window so that the back/forth arrows are on top of the image
- verify that the back/forth arrows have a dark shadow, and are still visible when on top of image
- resize your window so that the X icon is on top of the image (you may need to go to a different image)
- verify that the X icon has a dark shadow, and is still visible when on top of image