Вы можете нивелировать этот эффект с помощью отрицательного margin (в em) в соответствии с высотой строки (line-height 1 — это 1 em, вот и рассчитывайте). Т. е. ставьте нужную высоту строки (line-height: 1.8) и делайте визуальную компенсацию с помощью, к пример, margin: -0.8em 0.
Максим Ленский, нет, я имел в виду, посмотреть, как работают типичные шрифтовые иконки. Первый метод. Дополнил комментарий, чтобы не было недопонимания, спасибо :))
hesrun, да, прикольный доклад, я с помощью opacity правил баг скролла на iOS с этим свойством, чтобы избавиться от дёрганья.
Посмотрел доклад и немного документацию почитал — теперь понял, почему у меня так выходило: неудачное сочетание свойств (анимации, трансформации, box-shadow).
https://jsfiddle.net
И цвет чего должен меняться? Фон или текст?
Более того, span у вас не «блочный» совсем.