2

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

1 ответ 1

3

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

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

5
  • Т.е. после всех стилей? Объясните пожалуйста. В конце html страницы вы имеете в виду? перед закрывающим тегом <script> </script></body>.
    – Brendan8c
    1 апр 2021 в 23:51
  • Насколько я помню когда я это тестировал, у меня стили были объявлены в теге head и там же этот специальный script. Должно работать в любом случае даже и как вы сказали, но я имел ввиду после всех стилей буквально, вот прямо после всех. P.S Это касается html страниц не имеющих скриптов вообще
    – MaximPro
    3 апр 2021 в 0:48
  • Всё понял спасибо! Мне так-же помогла эта статья: css-tricks.com/transitions-only-after-page-load
    – Brendan8c
    3 апр 2021 в 1:49
  • Интересно, но ее функциональность ровно такая же как и пустого скрипта. Смысл в том чтобы вообще был какой-то скрипт. А то что там добавляется и удаляется класс дело десятое
    – MaximPro
    3 апр 2021 в 12:13
  • А я так-же отвечал на вопрос кому-то, тот через JS создавал новый iframe там стили дёргались при загрузке у него.. Я ему скинул про то, что нужно скрипт создать и вот эту запись со цсс-трикс, он сказал, что запись с цсс-трикс помогла, я уж не стал расспрашивать почему джава скрипт в конце дома не помог. Код не мой и дела не мои )
    – Brendan8c
    4 апр 2021 в 16:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.