Решение проблемы с самопроизвольным срабатыванием CSS transition в Chromium

Alexander K.
HTML и CSS
13.04.2018
164
При верстке очередной страницы обнаружил проблему, которая появляется исключительно в браузерах Chromium: если на странице есть форма и в стилях используется transition, то он начинает срабатывать при первой загрузке страницы. Неприятный "сюрприз", но есть решение.

Помучив Google и Яндекс, нашел пару давних тем, где люди предлагали различные варианты борьбы с этим недугом. В частности, в русскоязычной ветке Stackoverflow пользователи пришли к выводу, что причиной такого поведения transition является то, что преобразуемые им стили находятся в подключаемом файле. В качестве решения предлагается перенести "багованные" стили в html документ и разместить их в теге <style> </style>.

Честно говоря, такое решение мне не очень понравилось, т.к. придется делить стили на куски. Это не очень удобно при последующей работе со страницей. Да и гадать потом, почему пришел к такому странному решению тоже не хочется.

Пошарив в интернете ещё, наткнулся на другую тему, где народ более подробно разобрал эту проблему. Здесь представлены ещё несколько вариантов её решения. Однако, на мой взгляд, наиболее простым решением является включение в шапку сайта JS скрипта. В качестве такого скрипта может быть использована библиотека jQuery. А если же на вашей странице не предполагается использовать JavaScript вообще, то можно подключить несуществующий скрипт - это также позволит устранить проблему с transition.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- или -->

<script src="fixTransition.js"></script>