break-shot | Desktop app for capturing screenshots of responsive websites | Image Editing library

After additional day of research and testing I know for sure what causes my gallery to lag while scrolling the page on mobile device (only in landscape mode, when the gallery is split into two columns and right side uses js). Please, keep in mind that my phone is not the fastest device on the market, in fact I've used Nexus 4 for testing, so pretty old model.

To the point: Apparently there was a bug in Chrome (2012 - 2016) where the browser couldn't properly and dynamically handle scaling down high resolution images, resulting in massive lag while scrolling.

Source: https://bugs.chromium.org/p/chromium/issues/detail?id=92812

I do not know if this bug still exist but I guess it's safe to assume that UX while scrolling will depend on the computing power of your device. I was able to confirm that, after uploading some random low resolution image to my website. The lag was no longer a thing. Just take a look:

As you can see, even fast scrolling is not lagging. I know I've used exact same image all over the page but while testing same image in high-rez, the scrolling lag was instantly noticeable.

Another argument is the fact that http://buero-buero.org/ is not fully responsive. They are using 1:1 images and no matter what, the page won't scale them down. That would explain why scrolling on buero is so much smoother, even though they are using more complex and heavier multimedia along with modified scroll direction.

This is the key: scaling high-res images down. Now look, I know that during my test with low res images, they were still scalling to fit the container, (because I didn't bother to calcutlate the size of an image to prevent the scalling) but the scale of a manipulation was much lower, allowing my stone-age phone to handle the scrolling properly.

The last thing of course is the javascript function (called on window.onscroll event) that only in combination with scaling high-rez images down, might generate scrolling lag - depending on the computing power of your device.

SUMMARY: It's not the modified scroll direction that is casuing the lag. It is the combination of the js and high-res images that were scaled down.

Since I want to use high-rez images, I guess I will just make my breakpoint trigger on 1024px so that people viewing my website on mobile devices will not experience scrolling lag.