В хроме есть about:flags, попробуйте там включать/отключать параметры:
«Переопределение списка программного рендеринга»,
«Обработка всех страниц с помощью графического процессора»,
«Enable accelerated CSS animations»,
«Ускоренная работа фильтров SVG и CSS с помощью графического процессора»,
«Отключение вертикальной синхронизации графического процессора»
Если после каких-то изменений заработает отпишитесь тут пожалуйста :)
Разработчики знают об этом, но такие вещи реализуют «чтобы было». Понятное дело что в серьёзных проектах где нужна полная кроссбраузерность такими приёмами не похвастаешься :)
Как вариант попробуйте остановить анимацию (закомментируйте строки с анимацией), если блок появится значит проблема в анимации и, возможно, в рендеринге.
Я пытался играться с transform-origin в фф, но не получилось нормировать. Есть вариант пихать в ещё один блок и анимировать его, тогда должно плавно идти. Насколько я понял анимация так отображается из-за псевдо-элемента который увеличивает высоту блока на несколько пикселей, только вот фф их считает, а хром игнорирует и вращает блок 35 на 35.
«Переопределение списка программного рендеринга»,
«Обработка всех страниц с помощью графического процессора»,
«Enable accelerated CSS animations»,
«Ускоренная работа фильтров SVG и CSS с помощью графического процессора»,
«Отключение вертикальной синхронизации графического процессора»
Если после каких-то изменений заработает отпишитесь тут пожалуйста :)