karlhorky/gray

Toggle greyscale doesn't work

JulianMBr opened this issue · 7 comments

Hey,

I'm currently working on a simple toggle function for this. But it seems they removing/adding the class is not working (IE11).
However if I have .grayscale as standard class attribute it works (without the toggle obv.).

I'm quite new to javascript/jquery but the only thing I could think of is that while the first page render the code will be replaced with the SVG part, however - removing the grayscale class wont work.

Any idea?

Still didnt got it working. Any idea?

Removing the class again in polyfill browsers doesn't work at the moment.

As a workaround for now, you can:

  • include the grayscale-fade class
  • add a new class (color in the example below) to toggle the opacity of the svg element
  • remove the :hover rules with the transitions here and here
.grayscale-fade.color {
  -webkit-filter: grayscale(0%);
  filter: none;
}

.grayscale-replaced.grayscale-fade.color svg {
  opacity: 0;
}

I've opened another ticket to not replace the element outright at #21. Closing this for now.

@s1x As of v1.4.0, toggling the grayscale effect is supported with the grayscale-off class. See a demo here.

Thank's!

Really appreciate it! Keep up the good work!

No problem, thanks for opening the issue :)

Hey,

I just checked the update. See new issue: #24