Photoswipe: I get error about to much memory usage with a few 1200px images

[horst-n]

Hi, I'm currently rebuilding my website and want use the really awesome Photoswipe 4 Slideshow. (Thanks for making it!) I have setup a first version by simply adapting your demo version to my site. After getting that errors, I setup a test site with all other javascript stripped out. But regardless if there other scripts running or not, the error everytime occurs.

I have tried to debug this, I could follow until the clicked item and the prev next items where builded and loaded, etc, until line 3135 the error isn't logged but after line 3136: holder.el.appendChild(baseDiv); it occurs in the console.

Also, it only loads and uses the large images, not the medium, regardless of viewport size . The original error (in german) is: Der Speicherverbrauch für will-change ist zu hoch. Die Fläche deckt 1614421 Pixel ab, das Budget ist die Dokumentfläche mit 3 multipliziert (487680 Pixel). Alle Vorkommen von will-change im Dokument werden ignoriert, wenn die Summe über dem Budget ist..

It says that the memory usage for "will-change" is to high. The area covers 1614421 pix, the budget is the document area multiplied with 3 (487680 Pixel). All occurences of "will-change" in the document will be ignored if the sum is higher than the budget.

This behaves the same with FF38, Chrome and IE11, all on Win7. I have tested it in my local environment and on the online testsite. You can see it at http://test.nogajski.de/portfolio/. The site is private, you need to log in with user: itsme and pass: letmein321

I don't really understand why it is not working, are the images to large? Where is that budget coming from? Why is it so small? Or do I simply do it the wrong way? To much questions for a photographer! :)

[dimsemenov]

It's a warning, not an error. It seems to appear only since FF 37, in 36 I can't replicate this.

I'll take a look closer at this issue – maybe I'll find a way to reduce number of elements with will-change. For now you can ignore it. I'll update this issue if I'll find the solution.

[dimsemenov]

Try removing it on zoom-wrap, by adding:

.pswp__zoom-wrap {
  will-change: auto !important;
  -webkit-backface-visibility: visible !important;
}

and let me know if you see any difference in performance and if the warning still appears.

[horst-n]

Thanks for looking to this. I have added this to the end of the css file and the warning is gone now. :)

And sorry, you are right. It was only in FireFox, not in IE or Chrome. I have misunderstood how the medium and large image loading is working. I thought it depends on viewport size, but it seems to be bound to (mobile) devices. And that, together with the warning, has confused me that I thought when not loading the medium image with small viewport in the other browsers depends on the warning too. Sorry!

But everything is perfect and behaves as it should. With my iphone I get the smaller images. Your work is outstanding!

Should I close this issue now?

[LufoX11]

Sorry, in my case it didn't help. I think the fix is right but there are other will-change properties in the code that may be should be overwritten too. It's happening immediatly after opening the image.
This is the structure I'm using:

 87             <div class="pswp__ui pswp__ui--hidden">
 88                 <div class="pswp__top-bar">
 89 
 90                     <!--  Controls are self-explanatory. Order can be changed. -->
 91                     <div class="pswp__counter"></div>
 92                     <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 93                     <button class="pswp__button pswp__button--share" title="Share"></button>
 94                     <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 95                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 96 
 97                     <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
 98                     <div class="pswp__preloader">
 99                         <div class="pswp__preloader__icn">
100                           <div class="pswp__preloader__cut">
101                             <div class="pswp__preloader__donut"></div>
102                           </div>
103                         </div>
104                     </div>
105                 </div>
106 
107                 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
108                     <div class="pswp__share-tooltip"></div>
109                 </div>
110 
111                 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
112                 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
113 
114                 <div class="pswp__caption">
115                     <div class="pswp__caption__center"></div>
116                 </div>
117             </div>

This is my custom CSS for the component:

 597 /* ----------------------- Photoswipe ----------------------- */
 598 .pswp__button,
 599 .pswp__button--arrow--left:before,
 600 .pswp__button--arrow--right:before {
 601     background-image: url(../img/photoswipe/default-skin.svg);
 602 }
 603 
 604 // Fix for memory usage warning: https://github.com/dimsemenov/PhotoSwipe/issues/855
 605 .pswp__zoom-wrap {
 606     will-change: auto !important;
 607     -webkit-backface-visibility: visible !important;
 608 }                                                                                           

Thanks.