Я использовал эту SVG-маску для оттенков серого в браузерах, гдеfilter: grayscale(100%) не работает:

filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

Некоторое время назад это работало идеально, но теперь я получаю эту ошибку в консоли:

Небезопасная попытка загрузить данные URL: image / svg + xml; utf8, http: //www.w3.org/2000/svg 'height =' 0 '> # оттенки серого из фрейма с URL [мой домен здесь]. Домены, протоколы и порты должны совпадать.

Само собой разумеется, фильтр серого больше не работает.

Можете ли вы объяснить, что происходит не так?Можно ли это исправить так, чтобы использовался тот же самый CSS-код, не возникало ошибок и фильтр работал?Учитывая, что в нем упоминается один и тот же домен и протокол, хотя я не знаю, как реализовать решение, поскольку не понимаю проблемы, я могу помещать и связывать файлы в одном домене / поддомене с одним и тем же протоколом вместо использования внешнего URL.

ОБНОВИТЬ:

Пользователь @Potherca прокомментировал:

... работал в Chrome 52, сломался в Chrome 53 ...

Это тоже мой опыт. Маска SVG не работает в текущей версии Chrome (Chrome версии 53.0.2785.116), но она работала в предыдущей версии. Это все еще работает в Firefox и Safari.

ОБНОВЛЕНИЕ 2: Я попробовал это сhttps лайк...xmlns='http://www.w3.org/2000/svg'... но ошибка / ошибка сохраняется.

ОБНОВЛЕНИЕ 3: Как предложил пользователь @Potherca, перемещение строки фильтра SVG в верхнюю часть списка правил кросс-браузерной фильтрации устраняет ошибку. ПРИМЕЧАНИЕ: это обходной путь, но основная ошибка все еще существует в Chrome / Safari / webkit, но не существует в других браузерах / комплектах на момент этого обновления.