Why does a filter that is only supposed to change the alpha channel affect the RGB channels as well?

2 weeks ago 23

ARTICLE AD BOX

[Note: I am using this to make the opaque parts of an input (the text) fully transparent and the semi-transparent parts of the same input (the background around the text) fully opaque.]

Consider an element with a background with a low alpha:

body { --c: #00171f } div { --a: .07; background: rgb(from var(--c) r g b/ var(--a)) }

This element gets an SVG filter that should make all alphas smaller or equal to .2 be equal to 1 via feComponentTransfer.

That's all the filter is supposed to do, map the [0, 1] input alpha interval to [1.25, 0]. You can see this mapping and its clamped version equivalent graphed below.

Graphing the mapping.

The SVG filter itself looks as follows:

How I thought it would work: it would recover the opaque --c RGB values.

How it actually works: it returns somewhat different RGB values in all browsers. Something is at play here and I don't understand what. Why is this changing the RGB channels?

Why does the amount of change vary non-linearly with the alpha? Try to tweak the alpha to see the changes. A value of .05 brings me closer to the original RGB, and so do values between .2 or .1, whereas a value of .01 gives me pretty much black, a value of .2 pretty much blue.

This is what I get in Chrome:

Chrome result

And this is what I get in Firefox - almost the same but not exactly, look at .02 and .2:

Firefox result

Setting color-interpolation-filters='sRGB' on the filter doesn't seem to have any effect.

Things get kookier when I set the alpha via an opacity() filter, that is:

div { --a: .07; background: var(--c); filter: opacity(var(--a)) url(#extract) }

In this case, in Chrome, I get the same result #00161c (slightly different from the original #00171f) for all bars without color-interpolation-filters='sRGB' and the correct result for all bars regardless of alpha with color-interpolation-filters='sRGB'.

In Firefox however, I get the the exact same result as before when setting the alpha on the background. Setting the alpha via an opacity() filter makes no difference whatsoever and neither does the color-interpolation-filters value.

I'm on Linux, so I cannot test in actual Safari, but Epiphany seems to behave the same as Firefox.

Using the opacity property produces the same result as the alpha on the background case.

Using the opacity() filter on a child and then the SVG filter on a parent produces the same result as the alpha on the background case.

Here's a test snippet.

div { --a: .01; position: relative; margin: 10px; padding: .5em; &::before { position: absolute; inset: 0; z-index: -1; background: rgb(from var(--c) r g b/ var(--a)); filter: url(#extract); content: '' } &:nth-of-type(14n + 2) { --a: .02 } &:nth-of-type(14n + 3) { --a: .03 } &:nth-of-type(14n + 4) { --a: .04 } &:nth-of-type(14n + 5) { --a: .05 } &:nth-of-type(14n + 6) { --a: .06 } &:nth-of-type(14n + 7) { --a: .07 } &:nth-of-type(14n + 8) { --a: .08 } &:nth-of-type(14n + 9) { --a: .09 } &:nth-of-type(14n + 10) { --a: .1 } &:nth-of-type(14n + 11) { --a: .11 } &:nth-of-type(14n + 12) { --a: .12 } &:nth-of-type(14n + 13) { --a: .13 } &:nth-of-type(14n + 14) { --a: .2 } &:nth-of-type(n + 15)::before { background: var(--c); filter: opacity(var(--a)) url(#extract); } } body { --c: #00171f; background: var(--c); color: #fff; font: 2em monospace; text-align: center; } svg { position: fixed } <svg height='0'> <filter id='extract' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'> <feComponentTransfer> <feFuncA type='table' tableValues='1.25 0'/> </feComponentTransfer> </filter> </svg> <span>original #00171f</span> <div>--a: .01</div> <div>--a: .02</div> <div>--a: .03</div> <div>--a: .04</div> <div>--a: .05</div> <div>--a: .06</div> <div>--a: .07</div> <div>--a: .08</div> <div>--a: .09</div> <div>--a: .10</div> <div>--a: .11</div> <div>--a: .12</div> <div>--a: .13</div> <div>--a: .20</div> <div>--a: .01</div> <div>--a: .02</div> <div>--a: .03</div> <div>--a: .04</div> <div>--a: .05</div> <div>--a: .06</div> <div>--a: .07</div> <div>--a: .08</div> <div>--a: .09</div> <div>--a: .10</div> <div>--a: .11</div> <div>--a: .12</div> <div>--a: .13</div> <div>--a: .20</div>

Read Entire Article

LEFT SIDEBAR AD

Hidden in mobile, Best for skyscrapers.

Why does a filter that is only supposed to change the alpha channel affect the RGB channels as well?

ARTICLE AD BOX

Related

Vue doesn't load styles in root

How can I fit the width of a text element to that of the wrapped content? [duplicate]

How to remove a blue tint over a sidebar search box in Sphinx Read The Docs theme?

LEFT SIDEBAR AD