С чем связан поздний рендеринг Браузера?

Question

[thorii]

Задаю изначальный стиль

padding: 15px 10px 15px 40px;
    background: url(/storage/media/img/trash.png) 10px 17px no-repeat;
    transition: all 1.0s ease;
    cursor: pointer;

Но при рендере браузер присваивает тот же паддинг следуя правилу анимации Transition. То есть при изначальной загрузке страницу паддинг для браузера равен нулю и постепенно трансформируется до padding: 15px 10px 15px 40px;
Я знаю что дело в трансишене, но эта проблема началась лишь при перезагрузке сервера (OpenServer) изначально работало все нормально паддинг задавался сразу а не постепенно, в чем может быть проблема?

Загрузка стилей происходит в конце парсинга, может в этом проблема?
Оригинал

Comments

[Владимир]

Проблема в transition: all

Answer 1

[iBird Rose]

он и раньше так задавался. ты просто не замечал этого. видимо страница прогружалась дольше и не показывалось как задается паддинг.
в общем если транзишн там стоит не для паддинга - то меняй all - на то что тебе нужно.

Comments

[thorii]

Повторюсь, ранее этого не было, страница рендерилась моментально (локал. сервер) В моей практике такое вообще впервые, да еще и символ появился после перехода на phpstorm https://yadi.sk/i/VW5Qk5gzuWGbj

[thorii]

Даже при установке transition-property проблема продолжается, сначала базовый стиль а потом плавно переходит к CSS описанному стилю.

[thorii]

Впринципе ко всем элементам присваивается сначала базовый стиль браузера, а потом уже CSS описанные стили. Будто файл КСС поздно грузится

[iBird Rose]

thorii: так и должно быть. если ты обнуляешь стили в ксс. говорю же поставь к примеру transition: opacity 1.0s ease; если у тебя транзишн нужен для опасити(это я для примера) тогда не будет медленно paddingи считаться

[thorii]

iBird Rose: Я переместил содержимое в style Тег и все заработало как часы, проблема в поздней загрузке .css

[thorii]

iBird Rose: Явно идет задержка, но по какой причине браузер простаивает https://yadi.sk/i/iH7tyviLuWKu2

Answer 2

[trushka]

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

element {какие-то стили}
element {transition: 1s}

Comments

[thorii]

Попробую позже, но так как я решил использовать еще и JQ подключил его до css, пока простоя нет (jq CDN занял все)

[thorii]

Хотя ваше решение основано просто на том, что браузеру дольше парсить CSS что и уменьшит время простоя фактически.

[trushka]

Ну, я расчитываю, что браузер применит сначала правила из 1-й записи, без transition, а потом уже когда применит transition, всё уже отрисуется с нужными размерами. Хотя, может я и ошибаюсь..

[thorii]

trushka: Что самое интересное, при верстке такого не было, вот стоило утром выйти из гибернации и понеслась...

[thorii]

trushka: Попробую может перезагрузиться, по классике...

[trushka]

Кстати, заметил, хром глючит последнее время - иногда начинаются какие-то проблемы со временем - вроде и не подвисает, но какие-то задержки дикие если что-то по таймеру происходит.. Устраняется только перезагрузкой браузера.. Видно, баг в последней версии..

[thorii]

trushka: Я тоже заметил