Проблема с отображением в FireFox:

.thumbnail-media img {
    display: block;
    margin: auto;
    transform: scale(1);
    transition: all 0.2s ease-in-out 0s, transform 4s ease-in-out 0s;
    
}

.with-overlay:hover .thumbnail-media img {
    transform: scale(1.08);
}

Сделал чтобы при наведении на картинку был постепенный эффект увеличения/уменьшения, но в FireFox эффект отрабатывает не плавно, а картинка дергается из стороны в сторону, и увеличивается, потом так же уменьшается... Если убрать свойство - "transform 4s", проблема отпадает, но увеличение/уменьшение происходит слишком быстро...
Как устранить проблему?