Срабатывание transition при загрузке страницы

404

03 мая 2017, 08:00

Возможно где-то это проблема и решалась, но я не нашел. Когда страница загружается происходит так что по неизвестной мне причине срабатывает :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 Чтобы воспроизвести проблему скопируйте код на локальную машину (на сторонних сайтах это не получается сделать из-за скриптов)

Answer 1

Как оказалось есть такой баг в Google Chrome связанный на input и form. Решение как оказывается не сложное и нужно написать после всех стилей такой код:

<script> </script> пробел между тегами не случаен!