Почему происходит «затухание» при анимации?

Question

[Your Friend]

Ахтунг! подскажите пжлста почему после анимации происходит затухание элементов? Элементы после поворота теряют цветовую насыщенность, кто сталкивался с таким, дайте совет как исправить и почему такое происходит.
Пример https://jsfiddle.net/jg4jj1vr/

Comments

[Андрей]

затухает в Firefox

[Your Friend]

анимация что у меня на сайте, затухает и в хроме тоже...не знаешь причину?

Answer 1

[Stanislav Gorovoy]

Ничего они не теряют

Comments

[Your Friend]

prntscr.com/bj4z84 - до
prntscr.com/bj4zhf - после

у меня настойчивое ощущение, что все таки теряют, если присмотреться :\

[Stanislav Gorovoy]

Your Friend: нет, возможно дело в толщине линии

Answer 2

[Евгений]

Скорее всего это из-за того, что Вы линию в 1px поворачиваете на 45 градусов и браузер отрисовывает так 1px. Поставьте толщину в 2px и проверьте, будет все в порядке.

Comments

[Your Friend]

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

[Евгений]

Это проблема скорее монитора, т.к. не высокая плотность пикселей на дюйм. К примеру смотря с ретина дисплея у меня все в порядке, а если с обычного монитора, то заметен этот эффект.