Преобразование 3D CSS, зубчатые края в Firefox

Аналогично "css transform, зубчатые края в chrome", то же самое происходит с Firefox на 3D-преобразованиях, например: http://jsfiddle.net/78d8K/5/ (< - запомнить: Firefox)

На этот раз backface-visibility не помогает: (

Любая идея?

ОТВЕТЫ

Ответ 1

Отредактированный ответ: (после комментариев)

"Обходной путь", добавьте прозрачный контур:

outline: 1px solid transparent;

Протестировано на Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/

enter image description here

Оригинальный ответ: (зависит от фона)

"Обходной путь", добавьте атрибут border с тем же цветом фона (белый в этом случае):

border: 1px solid white;

Протестировано на Firefox 10.0.2 Windows 7: http://jsfiddle.net/LPEfC/

enter image description here

Ответ 2

Если вы хотите предотвратить сглаживание границы

Ниже работало лучше для меня

border: 1px solid rgba(0, 0, 0, 0.1);

если граница должна быть хорошо видна, это может быть не идеальное решение, хотя вам лучше придерживаться ответа @Juan.

Ниже приведен снимок экрана об повороте куба

введите описание изображения здесь

Ответ 3

Помимо использования outline, также работает следующее:

box-shadow: 0 0 0 1px transparent;

Ответ 4

filter:blur(.25px); работает для меня и не выглядит слишком размытым.

Пример: https://codepen.io/Grilly86/pen/QWLXBbX (попробуйте изменить строку 22 в (S) CSS)