Потому что размеры в процентах. В итоге, размер элемента становится с дробным значением, от чего и получается подобная проблема. Делайте элементы строго фиксированного размера и медиазапросами изменяйте размер.
У вас там места - тонна!! Зачем изменять размер этого блока попиксельно, когда можно лишь на определённых размерах.
Нечто подобное происходит и с трансформациями, элементы на разных размерах могут стать размытыми.
Это особенность рендера браузером. Вы можете погуглить особенности рендеринга браузером. Там очень много интересного можно узнать, как он рисует пиксели.
Простой