Как сгладить границы html элемента в Firefox при использовании rotate3d()?

Question

[Alex_8x]

Здравствуйте.
Сделал анимацию кнопки через transform: rotate3d() - https://codepen.io/Foxmind/pen/jOPPdPX . Во всех браузерах работает отлично, кроме FIrefox. В нем почему-то неровные границы при использовании трансформации - https://yadi.sk/i/oxQgK6SaC7wj0g
Подскажите, пожалуйста, это я туплю, или это "особенность" FIrefox? Как это исправить?

Comments

[RAX7]

У тебя с лисичка чем-то приболела. Вот так transform: rotate3d(0, 0, 1, 6deg) выглядит у меня

[Анатолий]

FF 72.0.2 Win 10 x64, Radeon RX 570 Series

[Alex_8x]

У меня Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0.
Установил совершено пустой новый FF. Проблема осталась. Причем на двух разных устройствах.

Если запустить FF в безопасном режиме, то все нормально. Не пойму, что мешает браузеру нормально выполнить трансформацию объекта в обычном режиме? Дополнений нет, совершено пустой новый браузер на двух разных устройствах.

[Alex_8x]

Подобная проблема наблюдается еще как минимум у 3х пользователей.

[Анатолий]

потестируйте тут

[Анатолий]

Также может что-то полезное выясните по инфе от caniuse:
- The perspective property doesn't work on the body element in Firefox, it must be used on an inner element.
- Firefox on Windows incorrectly renders plugin content within no-op 3D transforms.
- Some configurations of Linux and older Windows machines (those without WebGL support) have trouble with 3D transforms and will treat them as if perspective was set as none.

[Alex_8x]

Анатолий, да, тут тоже неровные границы у прямоугольника.
Насколько я понимаю, у всех по разному срабатывает 3D трансформация в Лисе. Все зависит от ОС и сборки системы.
Пожалуй, лучшим решением будет временно отказаться от этого свойства при анимации и сообщить о баге разработчикам. Жаль, конечно.

P.S. Дайте, пожалуйста, ссылку на инфу от caniuse.

[Анатолий]

Alex_8x, вот, внизу вкладка Known Issues