in.news.yahoo.com - The image is not displayed on the first site load

[webcompat-bot]

URL: https://in.news.yahoo.com/20-classic-murder-mystery-movies-141900684.html

Browser / Version: Firefox Mobile 86.0 Operating System: Android Tested Another Browser: Yes Chrome

Problem type: Something else Description: Images don't load when site is openend first time. Steps to Reproduce: Images don't load when site opened first time and after clearing data of the app. If you clear browsing data then sometimes only images don't load on the yahoo news website.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20201224094230
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[cipriansv]

Thanks for the report.

The issue is caused by the ETP browser option.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1684435, so let's close this as a duplicate of that.

[cipriansv]

After retesting the issue it seems that the images are displayed after a page reload regardless of the ETP being enabled or disabled, so I don't think it is ETP related as I initially suspected.

Tested with: Browser / Version: Firefox Nightly 210107(🦎 86.0a1-20210107040715), Chrome Mobile 87.0.4280.141 Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

Let's move this to needsdiagnosis for further investigations.

[karlcow]

the markup for images

<div class="caas-figure-with-pb" style="max-height: 320px">
  <div
    class="caas-img-container caas-img-loader caas-img-loader-offline caas-img-error"
    style="padding-bottom: 50%"
  >
    <img
      class="caas-img caas-lazy has-preview caas-error"
      alt=""
      src="https://s.yimg.com/ny/api/res/1.2/nMXzR9CEvahiOXstlDvfjA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTMyMA--/https://s.yimg.com/uu/api/res/1.2/3ce9Bu1BWPo9ArF_7dgx.g--~B/aD0xMDAwO3c9MjAwMDthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/good_housekeeping_561/701f6d0830dfdb490071eac7d5bfb31b"
      data-src="https://s.yimg.com/ny/api/res/1.2/nMXzR9CEvahiOXstlDvfjA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTMyMA--/https://s.yimg.com/uu/api/res/1.2/3ce9Bu1BWPo9ArF_7dgx.g--~B/aD0xMDAwO3c9MjAwMDthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/good_housekeeping_561/701f6d0830dfdb490071eac7d5bfb31b"
      loading="lazy"
    /><noscript
      ><img
        alt=""
        src="https://s.yimg.com/ny/api/res/1.2/nMXzR9CEvahiOXstlDvfjA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTMyMA--/https://s.yimg.com/uu/api/res/1.2/3ce9Bu1BWPo9ArF_7dgx.g--~B/aD0xMDAwO3c9MjAwMDthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/good_housekeeping_561/701f6d0830dfdb490071eac7d5bfb31b"
        class="caas-img"
    /></noscript>
  </div>
</div>

The image is loaded but there is

.caas-img-container.caas-img-loader .caas-img {
    opacity: 0;
}

which makes it invisible. If I set the UA to be chrome. The issue disappears.

<img
  class="caas-img caas-lazy has-preview caas-loaded"
  alt=""
  src="https://s.yimg.com/ny/api/res/1.2/nMXzR9CEvahiOXstlDvfjA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTMyMA--/https://s.yimg.com/uu/api/res/1.2/3ce9Bu1BWPo9ArF_7dgx.g--~B/aD0xMDAwO3c9MjAwMDthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/good_housekeeping_561/701f6d0830dfdb490071eac7d5bfb31b"
  loading="lazy"
/>

so there is user agent sniffing involved.

[softvision-raul-bucata]

The issue can no longer be reproduced due to a change in internal regulations of the page:

Tested with: Browser / Version:Firefox Nightly 97.0a1 (2015855979 -🦎97.0a1-20220106155649🦎) Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Tested with: Browser/Version: Firefox Daylight 40.2 (7167) Operating System: iOS 15.0

Closing this as INVALID as there is nothing we can do here.