Grayscale toggle isn't working properly
JulianMBr opened this issue · 3 comments
JulianMBr commented
Hey @karlhorky ,
I just checked the update 1.4.1 #b1263d464937a7651d99cd9ec215c2e0084dd549
This related to the closed #19.
- 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 loadclass="img-responsive"
. - 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 commented
Hi @s1x ,
-
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')
. -
I experienced this on first page load as well. It worked again after clearing the browser cache.
JulianMBr commented
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 commented
No worries - not a bother :) Glad it's working.