Photoswipe: Zoom in/out performance issues on mobile
First of all great i mean really great code. Best lightbox i've ever seen.
Problem is about the latest version of the plugin. I was using v4.0.7 - 2015-05-04 and i was happy with it, actually still i am. But decided to move to the latest one just in case. Then i noticed performance problem on mobiles. Zoom in and out is not that smooth like the old one. I attach two videos one is v4.0.7 with is smooth and the other one is 4.1.1 is not smooth like it's skipping frames.
Mobile device is Samsung Galaxy Note 4 running Lollipop 5.1.1 and latest Chrome Browser.
v4.0.7 (smooth)
https://www.youtube.com/watch?v=KVYgl2OBsJo
v.4.1.1 (not that smooth)
https://www.youtube.com/watch?v=jsnkenRFDdw
Edit:
I also tested v4.0.8 and v4.1.0. Seems problem starts with v4.1. v4.0.8 is as smooth as 4.0.7.
ergec
All 3 comments
In 4.0.7, PhotoSwipe rendered image at a full size, which caused memory issues.
In 4.1.0, it started rendering images at a size of viewport, which leads to slower animation when trying to zoom (as full size is not pre-rendered). You may try applying will-change:transform: style to IMG elements in gallery, which will make transition smooth again, but it dramatically increases memory usage, especially on iOS Safari.
I'm currently working on a new version (v5), can you please test it with your image and your device and let me know if zoom transition is smoother or not. Here is a link to CodePen that uses new version http://codepen.io/dimsemenov/pen/rrJgoO (you may export it via "Export" -> "Export .zip" and upload html/js file to your server). Just don't use new version is production yet.
dimsemenov
on 8 Oct 2016
I tested v5 and it's as smooth as v4.0.x. Thumbs up.
ergec
on 8 Oct 2016
is there a releasedate for v5?
dawuwu
on 2 Nov 2016
Related issues
silentbugs
路
5Comments
WebCustoms
路
3Comments
jamminjames
路
3Comments
tezma90
路
3Comments
mgk89
路
3Comments
Most helpful comment
In 4.0.7, PhotoSwipe rendered image at a full size, which caused memory issues.
In 4.1.0, it started rendering images at a size of viewport, which leads to slower animation when trying to zoom (as full size is not pre-rendered). You may try applying
will-change:transform:style to IMG elements in gallery, which will make transition smooth again, but it dramatically increases memory usage, especially on iOS Safari.I'm currently working on a new version (v5), can you please test it with your image and your device and let me know if zoom transition is smoother or not. Here is a link to CodePen that uses new version http://codepen.io/dimsemenov/pen/rrJgoO (you may export it via "Export" -> "Export .zip" and upload html/js file to your server). Just don't use new version is production yet.