Блог

Главная - Вопросы по программированию - Лучший способ увеличить масштаб замаскированного элемента, или почему Firefox отстает при увеличении анимированной маски

Лучший способ увеличить масштаб замаскированного элемента, или почему Firefox отстает при увеличении анимированной маски

#css #firefox #mask

#css #firefox #маска

Вопрос:

У меня проблема с масштабированием замаскированного элемента.

Вы можете взглянуть на мой пример jsfiddle: https://jsfiddle.net/1a7nb5my/9 / (вы можете видеть, что он отстает в верхнем левом углу). Это отлично работает в Safari, Chrome и т. Д., Но не в Firefox.

Это то, что я делаю:

 .test
{
     -webkit-mask-size: 100% 100%;
}

.test.active 
{
     -webkit-mask-size: 100000px 100000px;
}

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

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

Также приветствуются решения о том, как исправить отставание в Firefox.

Заранее спасибо за любую подсказку и помощь.

Редактировать:

Я нашел обходной путь, который не отстает: https://jsfiddle.net/5sv7j1ck/7 /

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

Метки: ,