I was sad to see that its been 8yrs and only Firefox supports css element().
Fortunately with the help of some clever scss and css variables. I have been able to implement a polyfill. There are some limitations and I would not call it performant but its not the worst I have ever seen.
I will see if I can get a better version working with the Paint Api.
You might be thinking, this is useless?
well compositing live blur effects would be fairly simple using this approach, something I have sort of done before in other pens but not as elegantly as this.
Top comments (3)
You solution is useless when try to render iframe\img that use resources from another domain
Hi David that's a pretty strong and damning statement 🤷♂️ I'm sorry your having a bad day?
It's a pollyfill for a now defunct feature, let's be real it's not that usefull, and then theres this edge case where an Iframe which could literally do something like this is included I should expect it probably doesn't work no.
I am unsure what the limits of html to canvas are off the top of my head, something I read way back then mentions tainted canvas and iframe security yadeya it's been a while, I'm an old JavaScript ninja, give me a break 😉. There are proposals for screenshot APIs to replace the use of that library.
All in all this was one of my most popular posts and I think it's fun which is therefore useful.