
CSS's "transparent" isn't all that transparent - arpohahau
http://coderwall.com/p/tpmsta
======
repsilat
No dark grey line in Konqueror 4.8.4 or Chromium 20 here, but Firefox 13.0.1
does mess it up like he says. (EDIT: browser versions added, OS is 64-bit Arch
Linux)

From a practical standpoint I guess you should be careful around `transparent`
if you're a designer, but the moral responsibility clearly falls on browser
vendors here. It's not meaningful to talk about the "colour" of transparent
objects, and using those values when doing anti-aliasing (however technically
appealing) is wrong.

I think the problem is that they're doing the anti-aliasing "too early".
They're not blending the colours you see, they're blending the colours they're
painting as they paint them.

~~~
overgard
I don't see this as the browsers fault (as a person that does graphics outside
of the web space). If you're blending something it's important to be clear
/what/ you're blending to, and the RGB matter just as much as the A.
"transparent" might be a part of the spec, but its tragically imprecise.

Its kind of like saying math is hard, so its up to the browser to fix it for
you. Math is hard, but there's always a right answer. If you're blending
things, there's a right answer too, and it's up to you to come up with it
instead of asking the browser to fix things for you. That's just how computing
is. Just because IE and chrome are clever enough to fix your own problems for
you doesn't mean you should feel entitled to expect that. If you're saying
"blend to (0,0,0,0)" you're literally saying "blend to black and transparent
equally". There is no ambiguity there. It's what has been asked for, even if
it's unintended. In a sense, I would say firefox is the only browser that has
gotten this right.

~~~
codeka
I would buy your argument if we were talking about a gradient. But this isn't
a gradient, it's an anti-aliased line.

The CSS describes a step transition from #eee to transparent, but because it's
on a diagonal, the browser is anti-aliasing the line.

Note that the reason it looks right in Chrome is because Chrome doesn't anti-
alias the line.

------
dphnx
This jsfiddle demonstrates it a bit more clearly.

<http://jsfiddle.net/liamnewmarch/GgUV2/>

The top gradient is from transparent to red, the bottom is from rgba(255, 0,
0, 0) to red.

Notice how the top gradient fades through grey - this is because 'transparent'
is a synonym for rgba(0, 0, 0, 0).

What the parent article picks up on, is how this is visible via Firefox's
antialiasing.

------
ferongr
I see no link to a relevant bug report linked in the article and without one,
that bug is never going to get fixed.

A bug report with a minimal testcase would take 50% the time it took to write
the article itself but actually have greater impact.

~~~
Hopka
But you'd have to figure out how to use Mozilla's bug tracker first. And that
has prevented me from reporting Bugs in Firefox every single time so far. And
I guess I'm not the only one.

~~~
ferongr
I'm not a professional in the field but I filed my first bug in Bugzilla some
years ago effortlessly. I'd expect a web author to be even better at using
technical tools.

Bugzilla is a wonderful tool for Mozilla. Unlike other projects that use
mailing lists or internal tools, Mozilla coordinates its projects mainly using
Bugzilla. Developers discuss patch approaches there, post WIPs and do code
reviews there. Considering Mozilla is comprised of many contributors all
around the globe such software is a necessity. Bugzilla may look complicated
and cumbersome but it's actually a powerful tool.

By comparison, the issue tracker used by the Chromium project is just a
public-facing ad-hoc thing. The project's workings are mostly opaque,
coordinated by Google's employees. The whole project works more like typical
closed-source software.

------
chengiz
I see a light grey triangle on firefox 13.0.1 in both examples. Have no idea
what they're talking about.

------
Dylan16807
> As it stands, many, _many_ things use transparent black when they shouldn't.

Transparent is transparent. Some code might be lazy and calculate colors based
on only three of four color channels but that is a bug and will be fixed.

------
dguaraglia
Firefox 14.01 on OS X Snow Leopard: works the same as in latest Chrome.

------
ck2
I see dark grey line between the triangles on Firefox 15 beta3 Windows XP Home
32bit

Maybe this is hardware dependent? I do not have any hardware acceleration that
I am aware of - integrated i3 graphics.

~~~
ThisIsADogHello
Looks to be hardware dependant. On 32bit Firefox 14.0.1 under win7 64bit, I
only see the thin line if I disable hardware acceleration in my settings.

------
nrkn
Firefox 14.0.1, Windows 7 x64. Grey line is visible for a split second as page
loads then disappears. EDIT: well now this is bizarre - it disappears and
reappears as I scroll.

~~~
steve-howard
I'm on Firefox 15, Windows 8 preview x64. Gray line stays visible. Odd.

~~~
nrkn
<http://imgur.com/dFXFa>

There is a grey line in frames 1 and 3 but not in 2.

------
kevingadd
Premultiplied alpha exists to solve this and similar problems.

~~~
mistercow
Premultiplied alpha exists to solve one problem: multiplying by the alpha
channel is common to almost all of the Porter-Duff compositing operations, and
computers used to be slow, so premul came about as a way of speeding up
drawing operations. Instead of multiplying each time, you simply multiplied
the alpha channels in advance.

Unfortunately, this causes a _ton_ of problems when you're doing anything with
transparent images outside the realm of Porter-Duff, since the process is not
fully reversible. In addition, it has tainted the way that developers think
about alpha channels, so that they erroneously act like there is only One True
Clear Color, which is how we ended up with issues like the one described in
TFA in the first place.

Premul is not the solution. Premul is the original problem.

~~~
ziedaniel1
I'm no graphics expert, but I'm pretty sure premul is not just an optimization
technique -- it's a fundamentally different approach at alpha blending, and it
makes some new things possible and some behavior more correct. See
[http://blogs.msdn.com/b/shawnhar/archive/2009/11/06/premulti...](http://blogs.msdn.com/b/shawnhar/archive/2009/11/06/premultiplied-
alpha.aspx) . Sure, if you don't need the extra features premul provides (like
the built-in ability for additive blending), then you can do some clever
computations like IE apparently does to get the same result, but it's much
simpler just to do things with premul.

------
forgottenpaswrd
I don't see a problem with the triangles on any of my browsers. I had tested
in 3 of them on my mac and 3 different in Linux, just for curiosity.

~~~
pstadler
No problem with FF 14.0.1 on OSX for me as well.

------
wbobeirne
Articles about CSS quirks in certain browsers really bug me when the author
does not also include a screenshot of the issue they're pointing out.

------
gddr
RGBA can be unintuitive. Opera implemented transitions by interpolating them
(I think it's solved now), which turns out not to work very well:
<http://bugs.hawn.be/opera/transitions/color/>

------
grayrest
I'm on Aurora (16.0a2 (2012-07-23)) on OS X 10.7 and the two examples look
identical.

~~~
city41
I'm on OSX 10.8 and Firefox 13.0.1 and I can't reproduce the problem. Both
examples also look identical for me.

~~~
mark_story
Same for me on Firefox 14 on 10.8, both examples look the same.

------
jay_kyburz
so stick with rgba() colours then?

