schepp/css-filters-polyfill

This polyfill takes the official CSS filters syntax and translates it to the different equivalent techniques that the browsers know for those effects

css-filters-polyfill's Issues

SVG elements "take space" on page

Hi,

On Firefox 18.0.2 / OSX 10.8.2 (haven't tested anywhere else), the SVG elements added to the DOM take space, as if they had dimensions.
You may consider adding some style on them (width and height to 0 / absolute positionning ?) so that they don't impact the page appearance.

The issue can be seen explicitely when you load this page example ( http://www.der-schepp.de/css-filters-polyfill/examples/animating-natively-vs-jquery/natively.html ). You may see the vertical scrollbar moving as the SVG elements are added to the DOM.

Unnecessary stylesheet caching?

I like this polyfill, but the caching it applies with localStorage here makes it hard to develop with.

Why does the library cache stylesheets anyway? Shouldn't that be up to the app's wider caching strategy?

Chrome 28 borked (Don't hide your brightness under a black box, oh no! You've got to let it shine...)

Hello! Great work on these polyfills! Loving them to death.

Sadly, I'm getting some borked (and quite unbecoming) black boxes in Chrome v28 (Win64). Happily, it's only on the brightness; I've never been accused of that attribute, so I can get by without it.

Cheers, hope this is useful; close if not.

Remove the minus + double the pixelradius

Change the -webkit-filter for brightness into a postive number.

On the demo it is a negative number, when you change it to a postive number it shows up exactly how IE it displays.

Also when you double the pixelradius of the blur effect on the IE filter it looks more closely on the chrome blur.

Use master as the default branch

Hi Christian,

I think it would be better if you use "master" as the default branch, as this is what most people expect. Currently the default branch is "gh-pages".

With subdomain?

I'm using a subdomain for css assets and Im getting

"Could not fetch external CSS via HTTP-Request http://assets.domain.com/css/style.css. Probably because of cross origin."

What's the best way to handle this CORS on the server?

Feature/hack request: retaining sharp edge of the blurred content container

This is an awesome filter collection.
My site is based on full screen images and I'd like to use blur filter in conjunction with modal. When I fire the modal the background blurs, but the edges (the entire content area in my case) gets this unsightly feathering.

Now, I do understand that Polyfill doesn't do anything wrong here; but I wonder if there any possibility to come up with some sort of hack which would allow to use this blur effect while retaining the sharp edge of the containing element? This illustrates what I'm talking about http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Thanks!

Provide links to spec and Can-I-use

Consider providing links to these two things:

• The Filter effects spec: http://www.w3.org/TR/filter-effects/#FilterProperty
• Info about browser support: http://caniuse.com/css-filters

in the README file.

When somebody stumbles upon this repo, they may ask themselves:

• Wher is this CSS Filters thing standardized?
• What's the browser support for this?

So, it'd be useful (for your visitors) if the above two links were provided.

Global variables

You have a few variables in your files that pollute the global namespace:
currentproperties, idx, key, mozFilter, msFilter, oFilter and webkitFilter all show up in the global DOM list.

Also, the cssParser.js file you're using uses A LOT of global variables for its internal logic, which seems kind of superflous. I haven't done any extensive testing (besides Firefox and Chrome), but I've simply put everything except the CSSScanner and CSSParser functions inside a self-executing anonymous function, and it seems to work for the time being (see above). There are certainly better ways though.
Maybe even some revised libraries for this, but I couldn't find the original code with a quick search for "cssparser js mozilla".

Feature request: Online generator

Having an extra dependency wouldn’t make sense for people with one or two filters. Instead, it would be great if there could be an online generator where people could paste in their code and get the SVG and IE filters.

Possible for IE 10 to use SVG?

I see firefox is using SVG filters. Looks like IE 10 supports them as well (http://caniuse.com/#feat=svg-filters). Possible to make an exception for that version of IE?

Not working with hex values

Hi, this works great except from when using other hex values than with numbers. #000, #999 works but not #a640db. Or am I doing something wrong??

SVG-filters render in different colorspace

Hello.
I noticed color difference between Firefox and other browsers.
Please see below
https://gist.github.com/ayapi/7655696
This HTML from \examples\stylesheet-embedded-vs-external\embedded.html
and replaced grayscale(1) with invert(1).
PNG is screenshot of Firefox and Chrome.

I guess it is related to SVG's color-interpolation-filters attribute.
The following is my article written about this attribute.
(I'm sorry for I have Japanese article only. But you can see screenshots and SVG code)
http://ayapi.github.io/posts/colorinvertcssonmozilla/#%E8%89%B2%E7%A9%BA%E9%96%93%E3%81%AE%E3%81%A1%E3%81%8C%E3%81%83

So I suggest adding color-interpolation-filters="sRGB" to Polyfilter's SVG code.
Please try to consider it.

allow em-values

filter: blur(0.25em); doesn't work
filter: blur(4px); works

Any chance to add missing browsers?

Is there any chance to add the missing browsers?

• Chrome (Android)
• Firefox Mobile
• Opera Desktop