Browser Loading Incorrect Image Size

[raywongjr]

Hi there,

I'm really stumped on this one, hoping I'm just missing something simple. It appears that in Chrome, the incorrect source image is being loaded from the provided srcset. You can view the website here, scroll down until you see the rows of 3 cards, and if you view the loaded image of any of these you will notice the size doesn't match. I'm using lazysizes on these images, with data-sizes=auto. The sizes value is being calculated correctly, but the image that's loading does not match the appropriate size.

I've cleared the cache on Chrome to see if that was the issue. But no luck. Any help is much appreciated. Please let me know if there's any other info that might be helpful.

Thanks!

[mdbrennan]

I have the same issue, its working for all browsers expect chrome.

When I add data-sizes=auto chrome only renders the lowest (first in set) image. All other browsers work as expected.

if I remove the data-sizes=auto, it works for all browsers expect for ios8

[aFarkas]

@raywongjr I'm not sure what your expectations are. If I run this:

document.querySelectorAll('.filter-grid .entry-image')[1].sizes // returns "300px"
document.querySelectorAll('.filter-grid .entry-image')[1].currentSrc //returns "http://stwww.surfingmagazine.com/wp-content/uploads/2015/09/indoabove-640x360.jpg"

Due to the fact that I'm using a 2x device, this is what I would expect Chrome to load. Note: I'm using the [1] not the [0], because this first is already upper in the page with a larger display size.

[aFarkas]

@mdbrennan Not sure, whether you face the same problem. Do you have a link to a site or testcase.

[raywongjr]

@aFarkas That makes sense for a 2x device, but running it on a 1x desktop screen, for a size of 300px it is loading the 640w image.

[aFarkas]

@raywongjr I can't reproduce this on a 1x screen.

The following code:

document.querySelectorAll('.filter-grid .entry-image')[1].currentSrc

returns:

"http://stwww.surfingmagazine.com/wp-content/uploads/2015/09/COSTARICA_2015_0338-300x169.jpg"

with empty cache. Do you mean a special image? Or is this not the case on your machine?

In general this would be a browser issue. lazysizes is just setting the sizes and the srcset attributes.

[raywongjr]

@aFarkas So, this is exactly why it's confusing. If you run your code:

document.querySelectorAll('.filter-grid .entry-image')[1].currentSrc

it returns as you mentioned. but instead of 1, you look at 0:

document.querySelectorAll('.filter-grid .entry-image')[0].currentSrc

it returns:

http://surfingmagazine.local:8082/wp-content/uploads/2015/09/JohnFlorence_winter2014-15_BrentBielmann394_1-960x540.jpg

Even though it produces sizes:300px.

But yes, it seems this is more of a browser issue than with lazysizes. Just curious why it appears to be inconsistent. Thank you.

[aFarkas]

@raywongjr

The "JohnFlorence_winter2014-15..." image is also included above in the flickity slider therefore this candidate is re-used. Due to the fact, that you it is on the same page you can't clear it from your cache.

So this is a feature, not a bug.

[raywongjr]

@aFarkas Ahh! That makes sense. Thanks so much for helping me understand what the browser is doing.