Возможно где-то это проблема и решалась, но я не нашел. Когда страница загружается происходит так что по неизвестной мне причине срабатывает :hover эффект. Почему так я не знаю. Можно проверить то о чем я говорю
.main{
background:green;
width:300px;
height:150px;
transform:scale(0.3);
transition:all 3s ease;
}
.main:hover{
background:red;
transform:scale(1.);
}
<input type="text">
<div class="main"></div>
Кстати я немножко покопался и выяснил одну интересную вещь: Если убрать со страницы все инпуты то hover эффект перестанет срабатывать по загрузке страницы. С чем связана эта зависимость?
P.S Чтобы воспроизвести проблему скопируйте код на локальную машину (на сторонних сайтах это не получается сделать из-за скриптов)