Почему происходит подобный скачек стилей?

Question

[Neyury]

Добавил стандартную форму регистрации от django ( UserCreationForm ) и некоторые стили на странице стали прогружаться не сразу (скакать). Это точно не проблема конкретного шрифта, потому что скачут не только они, но и их размер, а так же кнопка поиска, паддинки и другое.

Данная проблема устраняется, если убрать атрибут autofocus у первого поля. Но не хотелось бы решать эту проблему, используя данный способ. Хочу узнать в чем ее суть.

Пример при перезагрузке страницы


UPD: это происходит в Mozilla Firefox (в хроме все ок), есть предположение что скачут те стили, на которых как либо влияет transition (стили, размеры которых переопределены, кнопки и ссылки, переопределенные отступы), но не понятно как на это влияет autofocus

UPD: исправил часть проблем, добавив
transition-property: свойство [, свойство];

Comments

[zooks]

Исправьте "скачек" на "скачок" в заголовке. А почему это происходит - смотрите в стилях. Скорей всего дело в очередности и расположении в коде.

[javedimka]

Открой дебаггер и посмотри откуда и когда у тебя стили грузятся.

[Neyury]

javedimka: грузится всего три файла стилей (normalize.css, fonts.css, main.css), одинаково на разных страницах. Но проблема только на той, где есть autofocus, и я не понимаю КАК он может на это влиять?

Смотря на гиф, появилось еще одно предположение. Скачут только те стили, которые как либо связаны с transition (К примеру основные размеры шрифтов не скачут, а только те, размеры которых переопределены, а так же различные кнопки и ссылки с подобными эффектами), но опять же, как с этим связан autofocus?

[javedimka]

Neyury: stackoverflow.com/questions/18943276/html-5-autofo...
Грязь конечно, тем более вопрос старый, но попробуй, если не поможет, то можно через js фокус ставить, как в старые, добрые.
Или как вариант - обновить лису, потому что по какой-то аналогичной ссылке видел, что в 4+ лисе работает нормально.

Answer 1

[Вероника]

Как я поняла, проблема в том, что браузер подгружает стили позже, чем обрабатывает форму. А с формой у него какие-то затыки.

Попробуй в коде форму прописать после всех стилей.