it’s better to change panel’s transform percentage to pixels, like for panel-left:
transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
i figured out that it has huge performance impact when you throttle cpu on chrome dev tools to 6x
it would be nice either if implement this in swipe-panel using px instead of %;
К сожалению, на практике разницы нет:(
i tested out on web-kit android, and there was differences;
specially on old devices or emulating slow conditions.
the reason is animating with percentage is expensive:
and on android md theme, for toolbar there is a highlighter which transform3d by percentage:
i changed toolbar.js file like this, and jerky animations went away;:
ok, finally i have some time to explain how and why animating with css percentage is slow and a we should use pixels 
the browser has to calculate the percentage values for each frame (I guess?), but I’m surprised that it takes that much more, compared to using a pixel value.
this is example of some parllax.less page transition parts which i edited:
--device-width is calculated through java script on window resize and initial load.
and here is the results (with x6 slow down on mobile)
before change (with percentage transitions)
after change (with pixel transitions)
as you can see it’s smooth! i found out that using vw and vh instead of % does not have that issue!
it’s a little bit strange
@nolimits4web
I will check where it is possible to set/change in core, because it will not always work, e.g. in cases where elements/pages/toolbar take not the whole width, so it is a bit tricky
1 Like