Scale в Google Chrome
 

Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
Использую простой эффект. При hover на элемент у меня увеличивается img. Но внутри этого элемента у меня есть div у которого есть свойство transform: rotate(-90deg);. В итоге, во всех браузерах работает нормально, а в Google Chrome, при hover, элемент со свойством transform: rotate(-90deg);.будто бы смещается на px и возвращается обратно.

<div class="navigation__transport">
	<div class="navigation__section-wrap navigation__transport-wrap">
		<div class="navigation__section-title">Transport</div>
		<img src="~/App_Themes/Camira/app/general/img/transport.jpg" class="" alt="" />
	</div>
</div>

.navigation__transport {
	width: 34.5%;
	height: 100%;
}

.navigation__section-wrap {
    position: relative;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    img {
        transition: $transition-default;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &:hover {

        img {
            transform: scale(1.1);
        }
    }
}

s24344,
макет сделайте, так вам охотнее помогут.