Why does a filter gradient on a pseudo element not work in IE8?
The question is "Why don't filters work on pseudo elements in IE8?" The following is as close to a definitive answer as I can muster. It comes from the information on this page.
The gradient
filter is a "procedural surface" (along with alphaimageloader
). A procedural surface is defined so:
Procedural surfaces are colored surfaces that display between the content of an object and the object's background.
Read that carefully. It is essentially another "layer" you might say between the content of an object and that object's background. Do you see the answer to the question? What is created by :before
and :after
... Yes! Content. Specifically as MSDN notes:
The ::before and ::after pseudo-elements specify the location of content before and after an element in the document tree. The content attribute, in conjunction with these pseudo-elements, specifies what is inserted.
The generated content interacts with other boxes as if they were real elements inserted just inside their associated element.
Now, if it is content that is generated, then it is not an "object" containing content, but the content itself (which happens to have some behavior similar to an element object that might contain content).
Thus, there is no "object" containing "content" (since it is content) between which the filter
can place a procedural surface for content generated by a pseudo-element (i.e. "false element"). A gradient
must be applied to the object, and then the procedural surface is placed between it and the content.
The documentation on -ms-filter
-a synonym for filter
- states:
An object must have layout for the filter to render.
My first guess was that the :before
content doesn't have hasLayout
set to true. And while it's probably not set to true, it's probably not set to false either. For starters, when I followed the hasLayout docs to force the content to get hasLayout = true
(see jsfiddle) it didn't solve anything.
So I'd say it's neither true nor false. Instead, it's probably undefined. I noted in the same docs it says about the source of this property:
object.currentStyle.hasLayout
If we have a look at the W3 documentation on the content property it says:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).
So, a possible conclusion would be that the generated content is not an object, as such it does not have a currentStyle
property, and thus also doesn't have hasLayout
set to true
. This would be the reason that filters don't work on the generated content, and thus answer the question.
At first sight I thought I had found a hint in the console of the above fiddle:
document.querySelectorAll('div')[0].currentStyle.hasLayout;
// true
document.querySelectorAll('div:before')[0].currentStyle.hasLayout
// Unable to get value of the property 'currentStyle':
// object is null or undefined
But as mentioned in the comments by @BoltClock: querySelectorAll cannot access pseudo-elements.
Another hint (though -again- nothing more than a hint) that filter
won't work on pseudo-elements can be found in this msdn introduction on filters, stating (emphasis mine):
Filters are applied to HTML controls through the filter property
Although I'm not sure what is meant by "HTML controls", I wouldn't expect content generated by the :before
pseudo-element to be considered a "HTML Control".