Use a patterned background for transparent images in standalone view

NEW
Unassigned

Status

()

Firefox
Theme
6 years ago
9 months ago

People

(Reporter: Alfred Kayser, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments)

(Reporter)

Description

6 years ago
Spin off from 754133:
Use to get a patterned background like in image editors (PSD, Paint.net, etc):
background:-moz-Dialog url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEWgoKClpaUrSK7yAAAAAnRSTlNkFG3Yt+YAAAAPSURBVHheY2D4jxXhEgYAfr8P8SM7T18AAAAASUVORK5CYII=);
(Reporter)

Comment 1

6 years ago
Created attachment 623395 [details]
Some examples using a patterned background
(Reporter)

Comment 2

6 years ago
Created attachment 623396 [details]
Another elephant to test...

Note the effect during a reload when using a slow line...
Other examples to test: 
http://forum.cheatengine.org/files/trollface.large_426.png
http://pirlwww.lpl.arizona.edu/~perry/Messenger/Global_mosaic1.jpg
This mockup illustrates what could also be done : https://people.mozilla.com/~shorlander/files/stand-alone-image/stand-alone-image-01.html
But why not using adaptive background color mentioned in bug #713555 ? Won't it be a best idea for this 'multi-transparent' issue ?

Mockup looks nice :)
But still need user interaction...
(Reporter)

Comment 5

6 years ago
This bug is about using a patterned background, so that it doesn't require interactin (like in comment #3) or adaptive calculation (where sometime one wants to have a contrast color, or sometimes a better fitting...)
(Reporter)

Comment 6

6 years ago
Another good example to test the patterned background with:
http://www.livepino.it/stuff/livepino.logo.white.png

(Install Nautipolis to get a patterned background to transparent images).

Updated

5 years ago
Depends on: 788418

Updated

5 years ago
No longer depends on: 788418

Comment 7

5 years ago
Created attachment 724282 [details]
userContent.css to change some styles defined in TopLevelImageDocument.css

Hi, check out the CSS I attached (it's a quick hack you can put into userContent.css to easily change some of the styles defined in chrome://global/skin/media/TopLevelImageDocument.css

It changes overall style of image pages a bit making it look much better in my opinion.

The clou however is, that images are displayed with white background by default (that simply looks best for most images) but on mouseover on the image itself the background is replaced by a checkeboard-style pattern.

This allows to perfectly observe transparent images (even such unfortunate cases like white text on transparency) while not needing some nasty hacks (like the noisy light gray introduced in bug 793366).

Comment 8

5 years ago
Created attachment 724286 [details]
Screenshot with the above CSS applied to userContent.css

This screenshot shows the custom CSS in action: Transparency can be seen perfectly when hovering over the image.

Note the nice and clean appearance (no artificial noise in the background) as well as the slightly brighter background and the subtle box shadow (synchronizing the image page with pages showing the internal video player).

Comment 9

5 years ago
Created attachment 734139 [details]
Nicer solution than with userContent.css that gives patterned background

With this tiny little add-on the same effect is achieved as with my previously posted CSS.

Comment 10

3 years ago
Dupe of bug #214965 ?

Comment 11

3 years ago
Bug #214965 has product field set to "Core Graveyard". I assumed that meant basically the other bug was obsolete anyway and should R.I.P.?


Regarding a possible solution:
In the meantime I updated my add-on and it's also hosted on AMO now:
https://addons.mozilla.org/addon/nicermediapages/

So until Firefox provides native support for a patterned background for transparent images, we can use it to achieve what is requested in this bug.
You need to log in before you can comment on or make changes to this bug.