lazy/overflow.html

<!DOCTYPE html>
<html>
<style>
.img {
  display: block;
  width: 100%;
}

.img-container {
  width: 200px;
  margin-bottom: 200px;
  border-radius: 50%; /* Disable this rule, and they all load */
  background: #eee;
  overflow: hidden;
  border: 1px solid red;
}
</style>
<body onload='console.log("onload document")'>
<div>
This page has two lazyloaded images. One image with display:overflow that does not load as expected.
And the other image that loads fine when scrolled down.
</div>
<div style="height:10000px;"></div>

<img loading="lazy" src="../img/android-logo-200x200.jpg" onload='console.log("onload img10")'>

<div class="img-container"><img class="img" src="../img/pic_trulli.jpg" loading="lazy"></div>
<div class="img-container"><img class="img" src="../img/img_chania.jpg" loading="lazy"></div>
<div class="img-container"><img class="img" src="../img/w3schools_green.jpg" loading="lazy"></div>
<div class="img-container"><img class="img" src="../img/images.jpeg" loading="lazy"></div>
  
<div class="img-container"><img class="img" src="http://placekitten.com/200/200" loading="lazy"></div>
<div class="img-container"><img class="img" src="http://placekitten.com/210/200" loading="lazy"></div>	
<div class="img-container"><img class="img" src="http://placekitten.com/220/200" loading="lazy"></div>	
<div class="img-container"><img class="img" src="http://placekitten.com/240/200" loading="lazy"></div>

</body>
</html>