Parallax, Mask, Transitions (oh my!) Для IE без обрезки

Question

Я столкнулся с тем, что, по моему мнению, является уникальной ситуацией, главным образом потому, что я не могу найти ничего, чтобы помочь мне в этом. Я пытаюсь добавить эффект параллакса внутри маскированного элемента. Перед тем, как элемент может быть ... «parallaxed?» ... он должен скользить в поле зрения внутри маскированного контейнера.

В Chrome, у меня нет никаких проблем, как я могу использовать:

-webkit-mask-image: url(path/to/image.png); 

Для Firefox, у меня нет никаких проблем, как я могу использовать:

<svg><defs><clipPath id="clip-elem"><polygon points="0 0, 891 300, 0 944"></polygon></clipPath></defs></svg> 

и применять SVG клип к контейнеру, который создаст маску для большего элемента с:

clip-path:url("#clip-elem"); 

Для поддержки IE 10 и 11 единственное возможное решение для создания эффекта маски - использовать обрезку. Это дает иллюзию маски, но фактически зажимает элемент. Как только он начнет скользить вверх или вниз, вы сразу увидите, что он вырезается, когда он выходит за пределы области, где он должен быть замаскирован.

Может ли кто-нибудь предоставить рабочий пример (или проницательность) в IE маскировки с элементом, который анимирует вверх и вниз (translateY) без использования обрезки?

Answer 1

IE не поддерживает маскирование CSS или отсечение к произвольным формам. Если вам нужно замаскировать элементы HTML, возможно, самое лучшее, что вы можете сделать, - разместить перед вашими элементами изображение цвета фона с прозрачным отверстием в нем.

Альтернативно, возможно, вы могли бы жить с IE, используя прямоугольную область клипа вместо треугольника.

Или последний вариант - преобразовать все в SVG. Обрезка и маскировка работают внутри SVG.