Google Chrome и перетащите для прокрутки
Я занимаюсь разработкой веб-сайта: http://www.techniquetolife.com/ По сути, это div в 5 раз больше окна внутри div с размером окна, с другими div в пределах большого div, используя плагины overscroll и scrollTo для навигации.
Сайт отлично работает в Safari и Firefox для OS/X. Но у меня серьезные проблемы с тем, чтобы он работал в Chrome. Я не уверен, что это проблема только Chrome OS/X, но всякий раз, когда я прокручиваю один из внутренних блоков внутри большого блока, весь браузер замедляется, это происходит только в Chrome...
Если я отключаю оверскролл и использую полосы прокрутки, он работает на 100% нормально, но я действительно хочу использовать плагин для перетаскивания с прокруткой.
Я не очень хорош в кодировании, поэтому любая помощь будет принята с благодарностью.
Все плагины / браузеры на последней версии.
1 ответ
Хорошо, я отправил ответ на похожий вопрос, который, я думаю, тоже может быть связан. Я могу ошибаться, но вы можете проверить это.
Смотрите полный вопрос и мой полный ответ здесь: Chrome медленная прокрутка с элементами фиксированного положения
Проблема и как ее контролировать
Причина этого в том, что Chrome по некоторым причинам решает, что ему нужно перекодировать и изменять размеры любых изображений, когда над ним закрепляется фиксированная панель. Это особенно хорошо видно с
► Щелкните правой кнопкой мыши страницу -> проверить элемент -> временную шкалу -> кадры
► Хит запись внизу
► Вернитесь на страницу и перетащите полосу прокрутки вверх и вниз.
Похоже, это просто проблема с методом, который использует Chrome, чтобы определить, нужно ли перекрашивать нижний элемент.
Что еще хуже, вы даже не можете обойти проблему, создавая div над прокручиваемым div, чтобы избежать использования position:fixed приписывать. Это на самом деле вызовет тот же эффект. Chrome говорит, что если что-то на странице должно быть нарисовано поверх изображения (даже в iframe, div или чем-то еще), перекрасьте это изображение. Поэтому, несмотря на то, что div / frame вы прокручиваете, проблема сохраняется.
Простое решение для взлома
Но я нашел один хак, чтобы обойти эту проблему, которая, похоже, не имеет недостатка на данный момент. Добавляя
-webkit-transform: translateZ(0);
К вашей фиксированной панели, поместив этот div в свой собственный слой композиции.