Анимация CSS3 вызывает плохую визуализацию текста

Я пробую анимацию CSS3 на фоновом изображении. Все работает хорошо, проблема в том, что в Chrome текст размывается, когда идет анимация:

Во время анимации:

Отключение анимации:

Как вы можете видеть, рендеринг текста в порядке, когда анимация отключена, я знаю, что есть обычная проблема с рендерингом текста, но я не могу понять, почему рендеринг в Chrome плохой, когда анимация выполняется. Я не уверен, что могу что-то с этим поделать. Я протестировал анимацию в Firefox и IE, и все в порядке. Кстати, я работаю на Windows.

Fire Fox:

IE:

ИЗМЕНИТЬ

.bg-div {
    position: fixed;
    width: 110%;
    height: 110%;
    transform: translate(-5%, -5%);
    -moz-transform: translate(-5%, -5%) rotate(0.02deg); /* rotation to solve choppy animation on Firefox */
    -ms-transform: translate(-5%, -5%);
    background-image: url('images/colour-test.jpg');
    background-size: cover;
    -webkit-animation: bg-animation 10s linear infinite;
    -moz-animation: bg-animation 10s linear infinite;
    -ms-animation: bg-animation 10s linear infinite;
}

@-webkit-keyframes bg-animation {
    25% { transform: translate(-5.5%, -5.5%); }
    50% { transform: translate(-5.3%, -4.9%); }
    75% { transform: translate(-4.8%, -4.3%); }
}
@-moz-keyframes bg-animation {
    25% { -moz-transform: translate(-5.5%, -5.5%) rotate(0.02deg); }
    50% { -moz-transform: translate(-5.3%, -4.9%) rotate(0.02deg); }
    75% { -moz-transform: translate(-4.8%, -4.3%) rotate(0.02deg); }
}
@-ms-keyframes bg-animation {
    25% { -ms-transform: translate(-5.5%, -5.5%); }
    50% { -ms-transform: translate(-5.3%, -4.9%); }
    75% { -ms-transform: translate(-4.8%, -4.3%); }
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 65%;
    text-align: center;
}

Прочитав вопрос и ответ, размещенные в комментариях, я попытался добавить -webkit-font-smoothing: subpixel-antialiased; к .bg-div, но это не имело никакого значения.

ИЗМЕНИТЬ 2

Итак, это немного странно, во время анимации, по-видимому, position: fixed делает текст размытым. Я не знаю, как это возможно, во всяком случае, как только я удалил position: fixed, и фон анимировался, текст отображался правильно. Это все еще не то, что я хочу, потому что мне нужно исправить фон.