TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

CSS's "transparent" isn't all that transparent

49 pointsby arpohahaualmost 13 years ago

14 comments

repsilatalmost 13 years ago
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)<p>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.<p>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.
评论 #4321339 未加载
dphnxalmost 13 years ago
This jsfiddle demonstrates it a bit more clearly.<p><a href="http://jsfiddle.net/liamnewmarch/GgUV2/" rel="nofollow">http://jsfiddle.net/liamnewmarch/GgUV2/</a><p>The top gradient is from transparent to red, the bottom is from rgba(255, 0, 0, 0) to red.<p>Notice how the top gradient fades through grey - this is because 'transparent' is a synonym for rgba(0, 0, 0, 0).<p>What the parent article picks up on, is how this is visible via Firefox's antialiasing.
ferongralmost 13 years ago
I see no link to a relevant bug report linked in the article and without one, that bug is never going to get fixed.<p>A bug report with a minimal testcase would take 50% the time it took to write the article itself but actually have greater impact.
评论 #4321036 未加载
评论 #4321783 未加载
chengizalmost 13 years ago
I see a light grey triangle on firefox 13.0.1 in both examples. Have no idea what they're talking about.
Dylan16807almost 13 years ago
&#62; As it stands, many, <i>many</i> things use transparent black when they shouldn't.<p>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.
dguaragliaalmost 13 years ago
Firefox 14.01 on OS X Snow Leopard: works the same as in latest Chrome.
ck2almost 13 years ago
I see dark grey line between the triangles on Firefox 15 beta3 Windows XP Home 32bit<p>Maybe this is hardware dependent? I do not have any hardware acceleration that I am aware of - integrated i3 graphics.
评论 #4321094 未加载
评论 #4321465 未加载
nrknalmost 13 years ago
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.
评论 #4320921 未加载
评论 #4321758 未加载
评论 #4321269 未加载
kevingaddalmost 13 years ago
Premultiplied alpha exists to solve this and similar problems.
评论 #4321037 未加载
forgottenpaswrdalmost 13 years ago
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.
评论 #4322089 未加载
wbobeirnealmost 13 years ago
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.
gddralmost 13 years ago
RGBA can be unintuitive. Opera implemented transitions by interpolating them (I think it's solved now), which turns out not to work very well: <a href="http://bugs.hawn.be/opera/transitions/color/" rel="nofollow">http://bugs.hawn.be/opera/transitions/color/</a>
grayrestalmost 13 years ago
I'm on Aurora (16.0a2 (2012-07-23)) on OS X 10.7 and the two examples look identical.
评论 #4320893 未加载
评论 #4320896 未加载
jay_kyburzalmost 13 years ago
so stick with rgba() colours then?