Всем коллегам привет! Когда-то давно, ещё во времена первой версии F7, я сделал приложение. И это приложение работает и сейчас на первой версии, потому что не было времени переделать на новую версию. Когда увидел возможности пятой версии, решил что пора заняться. Переделал на F7 v5 + VUE, с помощью f7-cli создал проект и вообще всё хорошо. Но анимация очень сильно лагает на устройствах более слабых, а точнее не сама анимация а touch events, то есть открытие и закрытие панели свайпом, например если push popup закрывать свайпом. Более всего интересует swipe panel, потому что очень важную роль имеет в приложении.
У меня возникла две мысли:
сильно загружен интерфейс в приложении
компонент f7-panel работает как-то неправильно
Я с помощью f7-cli создал проект базовый, с табами на чистом f7, собирал билд под ios и посмотрел как работает на чистом F7. Как оказалось панель работает так же.
На двух версиях используется wkwebview.
По поводу тестов, запускал все версии на устройстве Iphone 5s, вполне ещё актуальное устройство, так вот на версии 1.7.1 панель работает максимально адекватно, приложение uptask на ios, посмотрите сами, а вот на версии 5 свайпом панель открывается примерно 5 кадров в секунду, в зависимости от загруженности активной вьюхи и самое панели.
Кто-то может сказать что это уже не актуальное устройство, делал тоже самое на iphone7, и там разница ощутима очень сильно. На седьмом работает конечно гораздо лучше.
Так вот вопрос. Кто и как решал даную проблему? есть ли решение? Буду изучать как работает swipe panel в первой версии и в пятой, но это займёт время.
Я думал проблема только у меня, но нет, базовый шаблон работает так же, а в первой версии всё отлично. Буду очень благодарен за любые варианты решений.
Путем долгого ковыряния в инспекторе удалось понять из-за чего тормозит анимация панели, так вот если убрать элемент .panel-backdrop, то всё становится просто идеально. Осталось понять, что именно с panel-backdrop не так
В принципе может быть причиной, так как во время свайпа “бэкдропу” меняется opacity, это потенциально может вызывать лишние действия у браузера во время рендеринга, но и в 1-й версии насколько я помню делалось тоже самое
Версия ios 12.4.3. Если бы дело было в отрисовке, то по идее, если бы я сделал display: none для .panel-backdrop, то фризов быть не должно, но они остаются и идёт перерасчёт translate3d
По моему личному опыту, когда анимируется объект а в нутри что то перерисовывается то это дико глючит как на видео. Надо смотреть через дебагер хрома --> rendering --> paint flashing