Как убрать фриз при появлении блока с background image?

Question

[kirillon37]

wrapper.classList.add('active__display')
setTimeout(() => {
     wrapper.classList.add('active__opacity')
}, 1)

.wrapper
{
	width: 100%;
	height: 100vh;
	justify-content: space-around;
	opacity: 0;
	visibility: hidden;
	display: none;
	transition-property: opacity,visibility;
	transition-duration: .5s;
}

.active__display
{
	display: flex;
}

.active__opacity
{
	opacity: 1;
	visibility: visible;
}

.row1 .img:nth-child(1){
	background-image: url('/static/img/1.jpg');
}

.row1 .img:nth-child(2){
	background-image: url('/static/img/2.jpg');
}

.row2 .img:nth-child(1){
	background-image: url('/static/img/3.jpg');
}

.row2 .img:nth-child(2){
	background-image: url('/static/img/4.jpg');
}

Comments

[Вадим]

А демку сделать не хотите? А то по коду фриза не видно.

[kirillon37]

Вадим, https://cloud.mail.ru/public/6W7p/X744GwuCt (Только так получилось)

[Вадим]

kirillon37, ага, фриз увидел, но делу это не поможет.
Пока могу только предложить открыть дев тулзы на вкладке perfomance, включить запись, начать интерактив, дождаться фриза, остановить запись и потом на таймлайне посмотреть что происходит в момент фриза.

[kirillon37]

Вадим, https://cloud.mail.ru/public/khdA/6n2cRXF9G
Фото проблемы. Когда нет картинок все работает хорошо. Если что, я работаю с webpack