Class with filter: grayscale(100%); breaks fancybox?

Question

css

Good afternoon!

I use this class for a bw effect on the site, and I hang it on the body:

.control-color-dark {
    -webkit-filter: grayscale(100%);
                 filter: grayscale(100%);
}

And everything is fine, the whole site becomes black and white. And everything would be fine, but the fancybox jquery plugin stops working correctly ((

Here is a screenshot of how fancybox works without the bw effect on the site

Here is a screenshot with a bw effect on the site

PS: How exactly fancybox breaks down - It stops resizing photos normally, they go to full size and it's impossible to view them in fancybox... Paging stops working, in general, scripts break... And control buttons also disappear =(

Answer 1

In general, you need to hang a class with a filter not on body, but on html, then everything works fine. I don't know why a class with filter set to body breaks scripts