iframe будут работать медленнее по тому, что для браузера есть дополнительные накладные расходы (его рендеринг, поддержка его экземпляра и ссылки на него).
Ответ из
статьи
=====================================================
Иван Кулаков,
Проверьте ваш HTML документ.
Если вы указывали в
<head> JavaScript и если вы его указали раньше стилей CSS тогда возможна изначальная загрузка JavaScript а затем и CSS стилей из за чего могут быть эти баги.
Нужно указывать сначало CSS стили а затем уже JavaScript код. Но в иделе конечно писать JavaScript перед закрывающим тегом
</body>
Также хотелось-бы добить, чтобы вы указали ваш
<title>Document</title> в низу под стилями.
Попробуйте написать в конце HTML документа в "скрипт с пробелом" или с комментарием.
Примеры:
<script type="text/javascript"> </script>
<script type="text/javascript">//</script>
Или за место верхнего скрипта с пробелом просто добавьте пустой JS скрипт там.
Так-же попробуйте это решение описанное в css-tricks.
Transitions только после загрузки страницы.
Цитата из w3 org
Различные вещи могут вызывать изменения вычислительных значений свойств элемента.
К ним относятся: вставка и удаление элементов из дерева документа (которые изменяют, имеют ли эти элементы вычисленные значения и могут изменять стили других элементов посредством сопоставления селекторов), изменения в дереве документа (которые вызывают изменения в том, какие селекторы соответствуют элементам), изменения на таблицы стилей или атрибуты стилей и другие вещи.
Эта спецификация не определяет, когда вычисленные значения обновляются, кроме того, что реализации не должны использовать, представлять или отображать что-либо, являющееся результатом каскадирования CSS, вычисления значений и процесса наследования.
Также перехода можно избежать, задав стили в HTML файле вместо использования CSS, которые загружаются асинхронно.
Простой
Простой