Проблемы производительности ScrollMagic в Firefox ** при большом размере экрана ** - PullRequest
Новая
       15

Проблемы производительности ScrollMagic в Firefox ** при большом размере экрана **

0 голосов
/ 16 февраля 2019

Во-первых .... Я люблю эту библиотеку!Престижность к janpaepke.Я надеюсь, что скоро у меня будет отличный демонстрационный сайт.

Я просто хотел начать разговор о проблемах производительности в Firefox и о том, как люди их преодолевают.В частности, Firefox, похоже, борется с несколькими переходами одновременно, как это делают Chrome и Safari.Я очень новичок в ScrollMagic, поэтому я пока не знаю его ограничений.

Вот код, который производит дрожание: 

 myAnimation.to(".my-svg", 1, {scale: 7, opacity: 0.5})
     .to(".my-photo", 1, {opacity: "0.8", scale: 1}, 0)
     .to(".my-progress-bar", 1, {width:"100vw"}, 0);

Я могу предоставить ручку, но не знаюдумаю, что это необходимо.Вот переходы:

  1. SVG масштабируется (от 1 до 7) и исчезает (это своего рода «водяной знак»)
  2. Изображение позади этого масштабируется от 1,2 додо его естественного размера (1) и постепенно увеличивайте с 0 непрозрачности до 0,8 (так, чтобы фоновый цвет div мог просвечивать).
  3. Индикатор выполнения перемещается слева направо, чтобы показать прогресс анимации.

Как я уже говорил, Chrome и Safari легко справляются с этими многочисленными переходами.Firefox граничит с непригодностью.На самом деле мне придется на 100% удалить некоторые переходы для Firefox.Я попытался потерять один из двух переходов из первых двух элементов - прокрутки или непрозрачности - и производительность улучшилась, когда она была просто непрозрачной, но она все еще боролась только с масштабом.

Это хорошо известно?Дело в Firefox - неспособность обрабатывать несколько переходов одновременно?Есть ли определенные переходы, с которыми он борется?Другие, с которыми это удобно?Есть ли способ подойти к этому немного по-другому, чтобы сделать его более плавным?Я думал отделить 3 перехода, даже если они наложены и происходят одновременно ... Будет ли FF справляться с ними лучше отдельно?

Любое понимание приветствуется.Я буду копаться в документах и ​​в то же время строить некоторые варианты.

РЕДАКТИРОВАТЬ:

Построение скрипки заставило меня заметить, что проблема повторяется только на экранах большого размера.Оригинальный сайт, где у меня есть triuble, хорош на моем MacBook Pro 13 ", но полный размер на моем imac 27" очень плохой, и вы можете получить его в скрипке.Пожалуйста, сделайте окно результатов скрипки как можно большим и сравните его в Chrome и Firefox.

https://jsfiddle.net/doughballs/vfup1624/

Извините за грубость этого.Я не мог точно воспроизвести серьезность проблемы на моем живом сайте, но вы можете заметить заметную разницу между опытом Chrome и Firefox.Кроме того, если вы прокрутите закрепленный раздел вверх и вниз, вы увидите, что текст в самом верху страницы очень кратко опускается над закрепленным разделом - только в Firefox - и только на экранах очень большого размера.Если вы сделаете скрипку в полноэкранном режиме, вы увидите ухудшение качества работы Firefox.В Chrome нет деградации при любом размере экрана.Так что это новое открытие и, возможно, ключ к пониманию того, почему FF борется с переходами, когда ширина экрана может быть 1700 пикселей и более.

...