Как быть с анимацией в Firefox?

Question

[TtT RrR]

На сайте есть элементы, которые вращаются. Не знаю как прям во всех браузерах, но в Firefox вокруг элементов появляется квадрат при анимации. Сам проверял в Edge, Yandex и Chrome, там этого нет.
Вот демонстрация в видео:
https://youtu.be/3CpMXIuuI78
https://youtu.be/Ec3qrBcFqfQ

Код css, например, кнопки бургера:

.header__burger {
    -webkit-mask: url(../images/icons/burger.svg) center / 100% no-repeat;
    mask: url(../images/icons/burger.svg) center / 100% no-repeat;
    background-color: #fff;
    width: 40px;
    height: 40px;
    display: none;
    transition: transform .3s ease;
}

.header__burger_close { // ------------АКТИВАЦИЯ АНИМАЦИИ
    -webkit-mask: url(../images/icons/close.svg) center / 100% no-repeat;
    mask: url(../images/icons/close.svg) center / 100% no-repeat;
    transform: rotate(360deg);
}

Answer 1

[Ivan Bogachev]

Это известный баг у масок в Firefox. Проявляется и с mask, и с clip-path. Суть проблемы в том, что маска применяется уже после трансформации, после поворота, и при расчете ее границ возникают сложности с округлениями до целого количества пикселей. Браузер не знает, в какую сторону лучше округлять. В результате для каких-то пикселей на границах маска применяется не так, как мы ожидаем, ее граница как бы смещается на 1px. Самый простой и безболезненный способ избавиться от проблемы в вашем конкретном случае - избавиться от масок. Нет маски - нет проблемы. Исходя из вашей задачи ничто не мешает использовать svg-иконки сразу, как есть, в виде обычных картинок, без нагораживания всей этой истории с белым квадратом, который потом обрезается.

Comments

[TtT RrR]

да, исправилось. только изначально цвета svg были чёрного цвета, благодаря mask можно изменить цвет и стоял белый через bgcolor.
теперь мне надо ставить svg с изначальным белым цветом?((

[Ivan Bogachev]

TtT RrR, А в чем проблема сразу использовать иконки нужного цвета?

[TtT RrR]

Ivan Bogachev, в целом нет, но с помощью mask я при hover менял bgcolor некоторым иконкам. есть альтернатива какая-нибудь?

[Ivan Bogachev]

TtT RrR, по аналогии меняйте color или fill у них (смотря как у вас там иконки нарисованы).