CSS3 Пользовательские фильтры применяются к холсту - Работа только при странных условий

Question

Чтобы ответить на этот вопрос Is there a way to create a 3D cylinder of the canvas element in CSS?, я играл с новым CSS пользовательских фильтров, пытаясь применить их к брезентовой элемента.

Это сработало, но только если некоторые условия, которые я не понимаю, выполнены. Они, похоже, связаны с поверхностью , определяемой свойствами холста. .height и .width. Сначала я подумал, что речь идет о производительности или помехах между рисунком CSS и холст-картинкой, но некоторые эксперименты, которые я сделал, казались неправильными.

Для иллюстрации этой ситуации я сделал jsFiddle (наведите указатель мыши над холстом, чтобы оживить его - убедитесь, что пользовательские фильтры доступны в вашем браузере).

Вот некоторые замечания, которые я сделал с помощью демо:

• Если (.height х .width < 65760px)
  • Нет проблем, фильтр применяется, все, что мы делаем с холстом ,
• Если (.height х .width> 65760px)
  • Фильтр, кажется, не применяется больше, если мы будем рисовать на холсте каждый кадр.
  • На самом деле, даже если мы рисуем только один раз, это не сработает.
  • Но если мы сохраним холст пустым/очищенным, тогда все будет нормально работать (ну, таким образом, мы просто применяем фильтр к прозрачному элементу DOM).
• Размер CSS (canvas { width: ...; height: ...}) на холсте, похоже, не влияет на него, а также количество вершин для фильтра.

Я не был в состоянии проверить еще, если значение 65760px то же самое на другом компьютере Попробованных на 2 разных компьютерах и получил тот же поведение/предел. Я использую Chrome Canary.

Любые объяснения?

Заранее благодарен!

Bye

Answer 1

EDIT: CSS Пользовательские фильтры были удалены из всех основных браузеров и не имеют никаких планов для будущего развития.

Старый ответ:

CSS-реализация пользовательских фильтров в Chromium пока не поддерживает ускоренные слои (например, видео, ускоренное холст). Эта функция все еще проходит много изменений и изменений.

В вашем примере, кажется, что холст представляет собой слой без ускорения ниже указанного вами размера. В этом случае пользовательские фильтры применяются на слое правильно.

Когда холст выходит за определенный размер, браузер продвигает его на ускоренный слой, а пользовательские фильтры еще не работают на ускоренных уровнях.

В Chrome Canary включите флаг «Сложные границы слоя рендеринга» примерно: флаги, и вы можете видеть, как холст продвигается к ускоренному уровню при перемещении слайдера размера вверх.