Я рисовал идею, когда я внезапно наткнулся на некоторые странные проблемы с производительностью рендеринга. Я создал CodePen, чтобы проиллюстрировать идею, ее навигационный элемент, который изменяется от position: fixed до position: static, когда он «сталкивается» с нижним колонтитулом. Таким образом, он выглядит как нижний колонтитул, подталкивающий его.Статическое позиционирование резко замедляет работу (?)
Это не багги JS (я пробовал без JS), что замедляет производительность при изменении режима позиции. Это то, что я нашел свойство CSS, которое делает его большим более тяжелым для браузера, который будет отображаться при прокрутке.
В IE10/Firefox это нормально работает, в Chrome вы можете увидеть в webspectors fps-meter, что намного тяжелее визуализировать.
Хотя, самое странное из всего, что я нашел; в Safari, это много медленнее для рендеринга. BUT добавление дополнительного элемента с position: fixed делает Safari лучше всего. (Safari версии 9.0.1 (11601.2.7.2))
С дополнительным неподвижным элементом: http://codepen.io/slebbo/pen/GpPRQX
Без дополнительного фиксированного элемента: http://codepen.io/slebbo/pen/avPZxy
Мои навыки Google не было никакой помощи с этим, любой, кто имеют ответ на это поведение. Особенно с Safari, это действительно фанки.
я только был в состоянии повторить производительность краски хит один раз, но я верю, что вы должны быть в состоянии это исправить, добавив преобразования : translateZ (0) на элемент, вызывающий удар производительности. –