1671389 - Images are not loaded and rendered correctly on news.sky.com

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Alin Ilea, Desktop Test Engineering]

Attachment: image load issue.mp4

Affected versions:

Nightly 83.0a1, Beta 82, Release 81.0.2

Tested on:

Windows 10 x64
Windows 7 x64
Ubuntu 18.04

Steps:

1. Launch Firefox and go to: https://news.sky.com/story/bts-members-of-hit-boy-band-land-a-huge-windfall-as-shares-in-management-label-surge-on-debut-12104392
2. Scroll down until see only a half of the image.
3. Refresh the page.

Actual result:

The image is loaded and rendered accordingly.

Expected result:

The image is not loaded.

Regression Range:

This is a regression from Fx71. Will provide a regression range asap.

Note:

The issue is not reproducible in Chrome. Please see the video attachment.

Severity suggestion: S4

Comment 1

[Jim Mathies [:jimm]]

Looking for a regression range.

Comment 2

[Alin Ilea, Desktop Test Engineering]

I tried to find a regression range multiple times but I obtain the same result, mozregression is unable to find a bisection in this case.
My results are:
Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=e1a65223d498aa0b8e3e4802d8267db2768073d9&tochange=e9783a644016aa9b317887076618425586730d73

• Last known good(2019-10-08): e1a65223d498aa0b8e3e4802d8267db2768073d9
  Build url: https://archive.mozilla.org/pub/firefox/nightly/2019/10/2019-10-08-21-45-57-mozilla-central/firefox-71.0a1.en-US.win64.zip

• First bad changeset (2019-10-09): cad27f93a9869351457fc5d5290777420068e173
  Build url: https://archive.mozilla.org/pub/firefox/nightly/2019/10/2019-10-09-21-39-14-mozilla-central/firefox-71.0a1.en-US.win64.zip

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:aosmond, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=720c1e5a8dd3f5bda4ae32137d1c624a1ad55301&tochange=be9a6289486a6f366e431782b84a0c0633f8fec2

And I confirmed that un-resister service workers from about:serviceworkers and setting dom.serviceWorkers.enabled to false mitigates the issue on Nightly85.0a1.

Comment 5

[Andrew Sutherland [:asuth] (he/him)]

I'm moving this to web compat for now because this ends up being a site issue and it's my suspicion and hope that the web compat team is more familiar with the nuances of how lazy loading can go wrong between browsers than I am.

Quick Summary

The site appears to explicitly be using lazy loading logic that involves ServiceWorkers serving a 1x1 transparent data URL image initially until the page logic updates the URLS. Disabling ServiceWorkers makes the problem go away because this effectively disables the image lazy loading because requests will always go to the network in that case.

The problem seems to be that the image served by the ServiceWorker ends up with the <img> tag having a bounding client rect height of 18.4px instead of the size of the post-load image height, which results in the the image indeed being off screen. The logic appears to be assuming that it would be dealing with an element whose size would be explicitly forced, but there doesn't appear to be styling for this. The image does live in a container that seems to be aspect-ratio sized... presumably that's what they thought they'd be measuring?

It appears that this isn't a problem in Chrome because when I refresh the page in Chrome, the page ends up smooth scrolling down to the pre-refresh scrolling position. It doesn't seem to do this for other sites, so maybe sky news is doing the smooth scrolling itself? Or maybe that's a Chrome implemented mitigation for sites that are known to have broken lazy loading?

The relevant styling for the image is:

.sdc-article-image__item {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

With that being contained in a div with this rule that is what gives us the placeholder on the page with the desired bounding rect height of 499.95:

.sdc-article-image__wrapper {
	position: relative;
	padding-bottom: 56.25%;
}

Investigation Details

Here's the image tag after scrolling down so only the bottom of the image is only partly visible and refreshing:

<img class="sdc-article-image__item" src="https://e3.365dm.com/20/12/768x432/skynews-brexit-billboard-time_5195520.jpg?20201205110204" srcset="https://e3.365dm.com/20/12/384x216/skynews-brexit-billboard-time_5195520.jpg?20201205110204 380w, https://e3.365dm.com/20/12/768x432/skynews-brexit-billboard-time_5195520.jpg?20201205110204 760w, https://e3.365dm.com/20/12/1600x900/skynews-brexit-billboard-time_5195520.jpg?20201205110204 1024w, https://e3.365dm.com/20/12/2048x1152/skynews-brexit-billboard-time_5195520.jpg?20201205110204 2048w" sizes="(min-width: 1024px) 1024px, 100vw" alt="An electronic billboard ">

And here's the image tag after scrolling back up so the image is visible:

<img class="sdc-article-image__item" src="https://e3.365dm.com/20/12/768x432/skynews-brexit-billboard-time_5195520.jpg?bypass-service-worker&amp;20201205110204" srcset="https://e3.365dm.com/20/12/384x216/skynews-brexit-billboard-time_5195520.jpg?bypass-service-worker&amp;20201205110204 380w, https://e3.365dm.com/20/12/768x432/skynews-brexit-billboard-time_5195520.jpg?bypass-service-worker&amp;20201205110204 760w, https://e3.365dm.com/20/12/1600x900/skynews-brexit-billboard-time_5195520.jpg?bypass-service-worker&amp;20201205110204 1024w, https://e3.365dm.com/20/12/2048x1152/skynews-brexit-billboard-time_5195520.jpg?bypass-service-worker&amp;20201205110204 2048w" sizes="(min-width: 1024px) 1024px, 100vw" alt="An electronic billboard " data-lazy-loaded="true">

And here are the relevant excerpts from the ServiceWorker at https://news.sky.com/lazy-images-service-worker.js:

    // if it has the bypass-service-worker parameter do not intercept
    if (url.match(/bypass-service-worker/)) {
        interceptRequest = false;
    }

    // if interceptRequest is still true return a blank gif instead of going to the network
    if (interceptRequest) {
        event.respondWith(fetch('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==').then(res => res));
    }

And this is the visibility checking logic from the page after beautification:

    isInViewPort: function(t) {
        var e = t.getBoundingClientRect();
        return 0 !== e.width && (!(e.bottom < 0) && (!((window.outerHeight || window.innerHeight) - e.top < 50) && (!(e.width + e.left < -50) && !((window.outerWidth || window.innerWidth) - e.left < -50))))
    },

As noted above, the visibility check is correctly determining things aren't visible because the e.bottom is appropriately negative.

Comment 6

[Karl Dubost💡 :karlcow]

I tried but I can't reproduce.
Nightly 85.0a1 (2020-12-06) (64-bit) with macOs

Comment 7

[Karl Dubost💡 :karlcow]

Ciprian in the webcompat team can reproduce. And there's a NS_ERROR_MALFORMED_URI in the network log.
https://searchfox.org/mozilla-central/search?q=NS_ERROR_MALFORMED_URI&path=&case=false&regexp=false

Ah I was doing it wrong. I reproduced too.

Steps to reproduce:

1. Go to https://news.sky.com/story/covid-19-office-christmas-party-dead-for-now-with-staff-opting-for-cash-instead-survey-finds-12150639
2. Scroll until the main article image is half hidden on the top (aka just the bottom of the image is visible)
3. Then reload.

Expected:
See the image

Actual
Image doesn't load.

Comment 8

[Karl Dubost💡 :karlcow]

https://github.com/skynews Nobody easy to contact on skynews Github.
but maybe Ed Conway could help https://github.com/edconway

Comment 9

[Karl Dubost💡 :karlcow]

Contacted Sky News about it.

Comment 10

[Karl Dubost💡 :karlcow]

Ed Conway passed the information to the tech team. Thanks!

Comment 11

[Oana Arbuzov [:oanaarbuzov]]

I can't reproduce the issue on my side, all images load after each page refresh.
https://prnt.sc/IlqKWGWHHaqm

Tested with:
Browser / Version: Firefox Nightly 104.0a1 (2022-06-28)
Operating System: Windows 10 Pro

Alin can you still reproduce it?

Comment 12

[Alin Ilea, Desktop Test Engineering]

Cannot reproduce the issue anymore using Windows 10 and the latest Nightly build 104.0a1.
Thanks.