Grayscale toggle isn't working properly

[JulianMBr]

Hey @karlhorky ,

I just checked the update 1.4.1 #b1263d464937a7651d99cd9ec215c2e0084dd549
This related to the closed #19.

1. If grayscale as a class isn't set from the begging on page load class="img-responsive grayscale" the toggle isn't working in IE11 (probably also lower). Hence, toggle doesn't work if class is only set on initial page load class="img-responsive".
2. I just checked it: http://work.karlhorky.com/gray/ - "CSS sprite background with background-size" does not work wit IE11. Works fine with FireFox etc. However, with FireFox Chrome // the green background is gone and returns red.
   EDIT: added point 2

[karlhorky]

Hi @s1x ,

1. You'll need to select the .grayscale-replaced element like in the onclick on the button in this demo. You can't select the .img-responsive element in polyfill browsers because it is replaced by the svg element.

   You could select both in jQuery using $('.img-responsive,.grayscale-replaced').

2. I experienced this on first page load as well. It worked again after clearing the browser cache.

[JulianMBr]

Thanks.
Sorry for bothering! The .grey() was the key.

Works with following code:

$('#sketchImg').toggleClass('grayscale');
$('.grayscale-replaced').toggleClass('grayscale-off');
$('.img-responsive').gray();

[karlhorky]

No worries - not a bother :) Glad it's working.