karlhorky/gray

Toggle greyscale doesn't work

JulianMBr opened this issue · 7 comments

JulianMBr commented

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?

JulianMBr commented

Still didnt got it working. Any idea?

karlhorky commented

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;
}
karlhorky commented

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

karlhorky commented

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

JulianMBr commented

Thank's!

Really appreciate it! Keep up the good work!

karlhorky commented

No problem, thanks for opening the issue :)

JulianMBr commented

Hey,

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