horizontalLoop helper — images loading in viewport/popping in

[Bielke and Yang]

Hello!

 

I'm using the excellent horizontal loop helper with a Draggable and it's working fine, except in Chrome where images "pop" in, as if lazyloading or something? Has anyone had this problem? It only happens in Chrome!

Another weird thing is that if I scroll just a pixel up or down, the image loads. Seems like some kind of optimization Chrome does with its rendering?

 

I took a screen recording of it here:

https://www.dropbox.com/scl/fi/ltwbvn1eknykyme0ssksl/image-pop.mp4?rlkey=5o6ia7l76t71606urtut7o5hv&dl=0

 

You can see the entering the viewport on the right "popping" in.

 

Any clues to what this could be, and if there's any tricks to circumvent it? Thanks!

[GreenSock]

First of all, thanks for being a Club GSAP member, @Bielke and Yang 💚

 

It's super difficult for us to know what might be causing that without seeing a minimal demo, like a CodePen or Stackblitz. My guess is that maybe you're running the helper function logic BEFORE your images are fully loaded and so they're actually resizing when they load and shifting the layout, throwing off the calculations. Make sure your layout is settled before you run those calculations. Or you could set the height/width in the CSS/markup ahead of time so that loading doesn't affect it. 

 

Otherwise, if you're still having trouble please post a minimal demo illustrating the issue and we'd be happy to take a peek. 

[GreenSock]

Oh, and one more note - I have seen a Chrome rendering bug (unrelated to GSAP) that basically caused elements not to render at the proper time when the containing element is very large/wide. It's as if Chrome busted things up into tiles internally for rendering purposes (think of maybe 2000px max wide) and then miscalculated when the next tile should get rendered. So maybe you're running into that. I hope they fix it soon. 

[Bielke and Yang]

On 3/21/2024 at 6:19 PM, GreenSock said:

Oh, and one more note - I have seen a Chrome rendering bug (unrelated to GSAP) that basically caused elements not to render at the proper time when the containing element is very large/wide. It's as if Chrome busted things up into tiles internally for rendering purposes (think of maybe 2000px max wide) and then miscalculated when the next tile should get rendered. So maybe you're running into that. I hope they fix it soon. 

I think you are on to something there. All images are preloaded, but if I only show 4, the bug doesn't happen, only when I have a wide "canvas" of images.