CSS3 Transform / Transition мигает при загрузке страницы
У меня есть 2 похожих вещи, но на первых входах, когда страница загружается, «мигает», а во втором — в обычном режиме. Поэтому я не могу найти, почему я сначала «моргает» на первом. Может быть, вы не можете видеть это на кодефене, но в обычном браузере вы можете это увидеть. <- Вы знаете, что я имею в виду, извините мой плохой английский.
1 ответ
Вы знаете, что у меня была аналогичная проблема при использовании плагина bootstrap affix. Что касается кодефана, вы не пишете всю информацию в одном месте (например, в текстовом редакторе, начиная с Doctype).
напишите свой код на codepen в области html с помощью этого синтаксиса html
Браузер понимает, когда он читает html-документ с этим форматом. Codepen вы не используете его или не нуждаетесь в нем, но у него также есть некоторые неудачи, поэтому я надеюсь, что эта работа. Давай и попробуй. Ура!
Срабатывание transition при загрузке страницы
Возможно где-то это проблема и решалась, но я не нашел. Когда страница загружается происходит так что по неизвестной мне причине срабатывает :hover эффект. Почему так я не знаю. Можно проверить то о чем я говорю
Кстати я немножко покопался и выяснил одну интересную вещь: Если убрать со страницы все инпуты то hover эффект перестанет срабатывать по загрузке страницы. С чем связана эта зависимость?
P.S Чтобы воспроизвести проблему скопируйте код на локальную машину (на сторонних сайтах это не получается сделать из-за скриптов)
Ответы (1 шт):
Как оказалось есть такой баг в Google Chrome связанный на input и form. Решение как оказывается не сложное и нужно написать после всех стилей такой код:
<script> </script> пробел между тегами не случаен!
Stop CSS transition from firing on page load
I’m experiencing an issue with the CSS transition property beeing fired on page load.
The problem is that when I apply a color transition to an element, (ex: transition: color .2s ) then when the page first loads my elements flashes from black to it’s own assigned color.
Supposing I have the following code:
On page load, my p.green will fade from black to green .
I don’t want to apply the color transition to the :hover pseudo class as that would not apply the transition onMouseLeave.
I’ts really annoying having the text flashing across the webpage. Up to this moment I have been avoiding using transitions unless I really need them and even so I use with care. It would be great if there is some really obvious solution to this that I’m not seeing!
This happens on Google Chrome. I haven’t tested in other browsers.
9 Answers 9
There is a bug in Chrome that causes CSS transitions to fire if the page includes a <form> element.
One simple fix is to add a script tag containing a single space to the footer of the page.
@Shmiddty comments on this question left me thinking, so I have been playing around with the code and found a solution.
The problem lies on the header declarations. By inverting the order of the CSS and JS external file calls — i.e. putting the CSS before the JS — the color transitions stop firing on page load:
My guess is that the JS load was delaying the load of the CSS to after the DOM was ready. By that time (as @Shmiddty suggested) the text had already been assigned the default browser color and was then using my CSS transition declaration to fade into its styled color.
** I’m still not sure this is the most appropriate way to do it, but it works. If anyone has a better solution please feel free to add or edit.
Остановить переход CSS3 от запуска при загрузке страницы
Я испытываю проблему со свойством CSS transition , которое срабатывает при загрузке страницы.
Проблема заключается в том, что когда я применяю color transition для элемента, (например: transition: color .2s ), то при первой загрузке страницы Мои элементы мигают от черного до своего собственного назначенного цвета.
Предположим, что у меня есть следующий код:
При загрузке страницы мой p.green исчезнет из black в green .
Я не хочу применять переход цвета к :hover псевдокласс, так как это не применяло бы переход onMouseLeave.
Меня действительно раздражает, когда текст мелькает на веб-странице. До этого момента я избегал использовать переходы, если они мне действительно не нужны, и даже тогда я использую их с осторожностью. Было бы здорово, если бы было какое-то действительно очевидное решение этого, которое я не вижу!
Правка 1:
это происходит в Google Chrome. Не тестировался в других браузерах пока.
Правка 2:
после некоторых тестов я понял, что мне не нужен родительский элемент с назначенным цветом, чтобы вызвать мигание на элементе со свойством перехода цвета, поэтому я перефразировал свой вопрос
7 ответов:
Существует Ошибка в Chrome это приводит к срабатыванию CSS-переходов, если страница содержит элемент <form> .
Одним из простых исправлений является добавление тега сценария, содержащего один пробел, в нижний колонтитул страницы.
Комментарии@Shmiddty по этому вопросу заставили меня задуматься, поэтому я поиграл с кодом и нашел решение.
Проблема заключается в объявлениях header . Путем инвертирования порядка .CSS и .JS внешний файл вызывает-то есть сначала .CSS затем .JS — цветовые переходы перестают срабатывать при загрузке страницы:
Я предполагаю, что нагрузка .JS задерживала нагрузку .CSS до того, как дом был готов. Тем самым время (как предложил @Shmiddty) текст уже был назначен цвет браузера по умолчанию и затем использовал мой .CSS transition объявление, чтобы исчезнуть в его стиле цвета.
Я все еще не уверен, что это самый подходящий способ сделать это, но он работает. Если у кого-то есть лучшее решение, Пожалуйста, не стесняйтесь добавлять или редактировать.
Добавьте в свой CSS:
И добавьте некоторый код в свой глобальный файл javascript:
Теперь вы можете отметить любой элемент на Вашей странице с помощью css-transitions-only-after-page-load class:
Принятый ответ не сделал трюка для меня. В Google Chrome есть ошибка , которую можно избежать, просто добавив скрипт на страницу . Даже пустой сценарий решает эту проблему.
- Поместите CSS оскорбляющего элемента(ов) внутри тега <style> в заголовке вашего HTML-файла. Ошибка возникает только тогда, когда CSS вызывается из внешней таблицы стилей.
- Поместите нарушающий элемент(ы) в контейнер flexbox . Это также исправляет ошибку.
Nienn публикует решение. Проблема заключается в заголовке документа, а также в том, где и как вы загружаете свои таблицы стилей. Это похоже на «не могу изменить заголовки, они уже отправлены» в PHP, за исключением того, что HTML/CSS/webkit не выдает вам ошибку.
Я испытывал именно эту проблему, прочитал сообщение нинн и пересмотрел свою голову. Вот мое прежнее содержимое.
Обратите внимание, что я не загружаю никаких JS, а также обратите внимание на то, как я загружал страницу таблиц стилей после указания заглавие. После перемещения таблицы стилей-ссылки на «назад», это сработало как заклинание. Конечный результат выглядел так:
Эту проблему может вызвать не только javascript, но и название сайта. Я думаю, что хорошим эмпирическим правилом является css > js > название сайта.
Вы пробовали использовать другие свойства перехода? Например:
Отлично работал для меня в Chrome.
EDIT: вы уже ответили на вопрос о браузерах. Вы должны попробовать использовать -webkit-transform