Предотвратить элементы прыгать в Chrome

Question

Проверьте страницу на http://myhymnal.net/2. В Chrome, когда страница загружает все остальные элементы между заголовком и текстом песни (селектор ключа и ссылки), кажется, немного перемещается. То же самое происходит, когда вы наводите курсор на две секции. Кажется, это связано с непрозрачностью и / или переходом CSS?

Насколько я вижу, это происходит только в Chrome, и я не понимаю, что здесь происходит, поскольку он прекрасно работает как в FireFox, Opera и IE.

Что-то не так с моим CSS или разметкой? Или это ошибка в Chrome? Или что здесь происходит? Любой способ предотвратить это?

Answer 1

Измени свой font декларация от:

body, input, textarea, select {
    font: 120%/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

в

body, input, textarea, select {
    font: 100% 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

кажется, что все ваши элементы масштабируются в соответствии с этим, поскольку они имеют измерения, установленные в em,

Я могу ошибаться в описании, но решение работает:)