www.panasonic.com - The slider has a white transparent overlay

[webcompat-bot]

URL: https://www.panasonic.com/fr/consumer/audio-video/lecteurs-et-enregistreurs-blu-ray/lecteur-blu-ray-4k-uhd/dp-ub820.html

Browser / Version: Firefox 115.0 Operating System: Windows 10 Tested Another Browser: Yes Edge

Problem type: Something else Description: Page not displayed properly Steps to Reproduce: The page is displayed properly, with no greyed out zones.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[sv-calin]

Thank you for reporting this issue, I was able to reproduce it.

https://github.com/webcompat/web-bugs/assets/107036654/e6ad3ca9-03fc-4f9f-9080-0a7d3e87051b

Tested on: • Browser / Version: Firefox Nightly 117.0a1 (2023-07-16) / Firefox Release 115.0.2 / Chrome 114.0.5735.199 • Operating System: Windows 10

Notes:

1. Reproducible on both Firefox Release and Nightly regardless of the ETP status
2. Not reproducible on Chrome

Moving to Needsdiagnosis.

[qa_29/2023]

[ksy36]

The processing of images happens inside imageLazyload(); function (i.e. setting src from data-src attribute). This function is called in Chrome, but not in Firefox.

This is a timing issue and it seems to be happening because $(window).on('load' is placed inside $(function(){ (document.ready):

(function($){
    $(function(){
....
        $(window).on('load',function(e) {
            //productBoxH();
            tabs(".product-tabs");
            seemore();
            relatedPages();
            specsImage();
            badge();
            $('.demo-block').each(function(index, element) {
                demos(element);
            });
            supportmod();
            mobile();
            // for lazy load
            imageLazyload();
        });

....
    });
})(jQuery);

The load event is fired before document is ready, therefore imageLazyload() doesn't get called. A fix would to be move the window.load handler outside the document.ready callback.

From jQuery documentation:

Note that although the DOM always becomes ready before the page is fully loaded, it is usually not safe to attach a load event listener in code executed during a .ready() handler. For example, scripts can be loaded dynamically long after the page has loaded using methods such as $.getScript(). Although handlers added by .ready() will always be executed in a dynamically loaded script, the window's load event has already occurred and those listeners will never run.

Also see https://github.com/jquery/jquery/issues/3194#issuecomment-228556922 We can try to contact the site to see if they could apply the fix.