предисловие
Всем известно, что position: fixed используется для создания абсолютно позиционированных элементов, расположенных относительно окна браузера. Положение элемента задается свойствами «слева», «сверху», «справа» и «снизу».
Внезапно я обнаружил, что на веб-странице, которую я написал ранее, была небольшая ошибка: в части кнопки оформления заказа на странице покупки есть нормальное взаимодействие, основанное на стандартном макете статического потока документа под корзиной, когда колесо мониторинга веб-страницы в верхней части она будет позиционироваться неподвижно.
Подробное описание
После многих тестов выяснилось, что дрожание появилось вероятностно, первое чутье подумало, что проблема в браузере Хром, а потом я тестировал разные версии, а также менял другие браузеры, и обнаружил, что проблемы есть, потом поставил цвет фона из всех ящиков, Обнаружена проблема: фактическая модель ящика в глазу будет немного выше, чем область модели ящика, на которую указывает мышь:
дрожание
обычная коробочная модель
Это конкретная проблема.Дополнительные пиксели около 1 пикселя, кажется, не проблема в статическом представлении, но как только будут добавлены некоторые динамические эффекты, будет дрожание, и опыт будет очень плохим. Но поскольку это вероятностная задача, я вдруг не знаю, как ее решить?
задача решена
Это может быть конфликт кода, поэтому я удалил соответствующий код, но он не работает! Я вдруг вспомнил, что раньше читал статью о том, как оптимизировать производительность анимации, в которой говорилось о решении джиттера, поэтому я попытался добавить:
-webkit-transform: translateZ(0);
transform: translateZ(0);
После повторного тестирования ошибка действительно была устранена.
Суммировать
Как правило, существует 2 оптимизации производительности анимации css3:
- Попробуйте использовать преобразование как анимацию и избегайте прямого использования высоты, ширины, полей, отступов и т. д.;
- Рекомендуется включить аппаратное ускорение графического процессора браузера.
Поэтому мы используем tanslateZ(0), чтобы превратить его в 3D-эффект, и включить аппаратное ускорение графического процессора браузера для повышения производительности рендеринга браузера; вышеописанная ошибка блочной модели, когда элементы страницы перестраиваются и перерисовываются из-за фиксированного позиционирования, может быть вызвано рендерингом веб-страницы.Поэтому подобные ошибки или дрожание можно устранить, попробовав tanslateZ(0), но это также имеет недостаток, связанный с энергопотреблением и выделением тепла.