Certain images not loading when using threshold: 0.1 - Firefox

[JorgeSivil]

Expected Behavior

Load image

Current Behavior

Certain images are not loading. I don't know yet what could be affecting it.

Figure not loading:

<figure class="listItem__figure relative">
                    <a rel="nofollow" role="link" class="$tkl" href="http://target.georiot.com/Proxy.ashx?TSID=5036&amp;GR_URL=http%3A%2F%2Fwww.amazon.com%2Fs%2Fref%3Das_li_ss_tl%3Furl%3Dsearch-alias%253Dtoys-and-games%26field-keywords%3DProfessor+Severus+Snape&amp;amazon-ids-by-cc=US%3DRankerpic75687-20" data-tkl-params="listId=861089&amp;nodeId=2008343&amp;buyImgLink=true" data-tkl-clickbound="true"><img data-sizes="auto" itemprop="image" data-src="https://imgix.ranker-dev.com/node_img/101/2008343/original/severus-snape-film-characters-photo-1?w=87&amp;h=87&amp;fit=crop&amp;crop=faces&amp;q=60&amp;fm=pjpg" class="listItem__image lozad" alt="Professor Severus Snape
...
                    is listed (or ranked) 9 on the list The Best Movie Characters of All Time"></a></figure>

Figure loading:

<figure class="listItem__figure relative">
                    <a rel="nofollow" role="link" class="$tkl" href="http://target.georiot.com/Proxy.ashx?TSID=5036&amp;GR_URL=http%3A%2F%2Fwww.amazon.com%2Fs%2Fref%3Das_li_ss_tl%3Furl%3Dsearch-alias%253Dtoys-and-games%26field-keywords%3DRocky+Balboa&amp;amazon-ids-by-cc=US%3DRankerpic75687-20" data-tkl-params="listId=861089&amp;nodeId=3533123&amp;buyImgLink=true" data-tkl-clickbound="true"><img data-sizes="auto" itemprop="image" data-src="https://imgix.ranker-dev.com/node_img/177/3533123/original/rocky-balboa-film-characters-photo-1?w=87&amp;h=87&amp;fit=crop&amp;crop=faces&amp;q=60&amp;fm=pjpg" class="listItem__image lozad" alt="Rocky Balboa
 

                    is listed (or ranked) 10 on the list The Best Movie Characters of All Time" src="https://imgix.ranker-dev.com/node_img/177/3533123/original/rocky-balboa-film-characters-photo-1?w=87&amp;h=87&amp;fit=crop&amp;crop=faces&amp;q=60&amp;fm=pjpg" data-loaded="true"></a></figure>

Possible Solution

Use threshold 0.0 (default)

Context

Loading a list, each element with a "profile" picture. So they have the same structure. Chrome works OK Version 80.0.3987.149 (Official Build) (64-bit)

Config:

const observer = lozad('.lozad', {
  rootMargin: '200px 0px',
  threshold: 0.1
});
observer.observe();

Tested on:

• Browser Name and version: Firefox Developer Edition, 75.0b5 (64-bit), Chrome works OK Version 80.0.3987.149 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Ubuntu 20.04 Desktop

[rsteei]

I had a similar issue with firefox/chrome and alt tag. I added to the lazy images following css: display:block;min-width:1px;min-height:1px; and that fixed the issue for me. Maybe that will fix the issue.