Images in yeezy.com not loading

[ownedbywuigi]

Please always mention the name/domain of the website in question in your topic title.

Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:

1) Clear any current output
2) Navigate or refresh the page in question
3) Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.

Code: Select all

GET 
https://yeezy.com/cdn-cgi/image/width=560,height=560,quality=100,compression=fast,slow-connection-quality=80,fit=pad,gravity=center,background=transparent,format=webp/https://cdn.swell.store/yzy-prod/694d83a5c784200012d74fd1/e33f547f80a9269c17aaefd46866fca8/PK-01-BLACK-FAUX-LEATHER-1.png [HTTP/2.0 415 Unsupported Media Type 43ms]
GET 
https://yeezy.com/cdn-cgi/image/width=560,height=560,quality=100,compression=fast,slow-connection-quality=80,fit=pad,gravity=center,background=transparent,format=webp/https://cdn.swell.store/yzy-prod/691f93c9d5cd800012732ce8/884deb29a36c8f45e3c67f02d16a3076/image-1.png [HTTP/2.0 415 Unsupported Media Type 46ms]
GET 
https://yeezy.com/cdn-cgi/image/width=560,height=560,quality=100,compression=fast,slow-connection-quality=80,fit=pad,gravity=center,background=transparent,format=webp/https://cdn.swell.store/yzy-prod/6901fcdf8326ff00128a9b7d/63becf24ff91b6af1245828d855e3287/BD-10-1.png [HTTP/2.0 415 Unsupported Media Type 46ms]
GET 
https://yeezy.com/cdn-cgi/image/width=560,height=560,quality=100,compression=fast,slow-connection-quality=80,fit=pad,gravity=center,background=transparent,format=webp/https://cdn.swell.store/yzy-prod/690b7930f37179001299426e/b5a819688783c8e0cf498e121f408497/image-1.PNG [HTTP/2.0 403 Forbidden 21ms]
GET 
https://yeezy.com/cdn-cgi/image/width=560,height=560,quality=100,compression=fast,slow-connection-quality=80,fit=pad,gravity=center,background=transparent,format=webp/https://cdn.swell.store/yzy-prod/690b7930f37179001299426e/b5a819688783c8e0cf498e121f408497/image-1.PNG [HTTP/2.0 403 Forbidden 17ms]
GET 
https://yeezy.com/cdn-cgi/image/width=560,height=560,quality=100,compression=fast,slow-connection-quality=80,fit=pad,gravity=center,background=transparent,format=webp/https://cdn.swell.store/yzy-prod/690b78132470e200127dab36/99deb7cc16038af7025b6864af3256e5/image-1.PNG [HTTP/2.0 403 Forbidden 16ms]
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: nonce-source or hash-source specified  
(unknown)
Content Security Policy: Couldn’t process unknown directive ‘require-trusted-types-for’  
(unknown)

The rest of the website seems to work, it's only just this one nitpick.

[ownedbywuigi]

Note that I have tried this on Pale Moon, Basilisk, RT1's Basilisk and my fork of RT1's Basilisk with the same result across all browsers, so this might be a general UXP issue

[Moonchild]

For the 415 errors, it seems to be webmaster error providing wrong source images to be processed by yeezy. Maybe they are providing too large source images or something that yeezy refuses?
https://yeezy.com/cdn-cgi/image/width=5 ... D-10-1.png

ERROR 9412: Could not resize the image: The requested file is not an image. Please make sure the server always serves an image (e.g. not an error page, or a login page)

The source image https://cdn.swell.store/yzy-prod/6901fc ... D-10-1.png does load in Pale Moon when accessed directly, but it's pretty big.

The 403 ones load fine for me
https://yeezy.com/cdn-cgi/image/width=5 ... mage-1.PNG
This is an image of a fluffy brown fur jacket. Since the error is 403 (access denied) this can be caused by your browser settings (e.g. advanced privacy "lock-downs" or similar.)

[ownedbywuigi]

Since the error is 403 (access denied) this can be caused by your browser settings (e.g. advanced privacy "lock-downs" or similar.)

From what I can tell when I tried (and failed) fixing it, it seems to be a Cloudflare issue? I'm on a stock profile, and no privacy-related settings are enabled on all browsers tested.

Also, a new error from console when I tried doing this a second time (under Pale Moon Safe Mode):

Code: Select all

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (591192 px). Occurrences of will-change over the budget will be ignored.

[Moonchild]

Also, a new error from console when I tried doing this a second time (under Pale Moon Safe Mode):

Be aware that Safe Mode isn't meant to be used for normal operation; that mode is there to be able to fix pertinent issues that would prevent you from using the browser normally otherwise. It disables a number of optimizations, and the fallback can provide additional warnings or errors.

Back on topic, I don't know off-hand what might be the problem if this happens in a new profile. Maybe someone else has an idea.

[ownedbywuigi]

I managed to make it a bit better under my UXP fork, with the 415 and 403 errors gone.
I assume lazy-loading is the only reason left why the images cannot be rendered in the website, but I'm not an expert on this type of topic.

https://github.com/OwnedByWuigi/UXP/com ... bf2c1f203d

[ownedbywuigi]

New discovery, I'm not sure if this is a CSS issue (considering it says the image is 0 by 22 lol)

[ownedbywuigi]

HOLY SHIT IT WAS A CSS ISSUE

Code: Select all

class="user-select-none absolute inset-0 h-full w-full scale-[var(--scale)] transform object-contain opacity-0 select-none opacity-100"

One of these classes in <img> caused the image to not render

UPDATE: it was

Code: Select all

absolute

[ownedbywuigi]

Should be resolved.

Here's the userscript for now that resolves the issue:

Code: Select all

// ==UserScript==
// @name         Remove 'absolute' class from images
// @namespace    wuggy.kirin
// @match        *://*/*
// @run-at       document-end
// ==/UserScript==

(function () {
    function stripAbsolute(img) {
        if (img && img.classList && img.classList.contains("absolute")) {
            img.classList.remove("absolute");
        }
    }

    function processAllImages(root) {
        var imgs = (root || document).querySelectorAll("img.absolute");
        for (var i = 0; i < imgs.length; i++) {
            stripAbsolute(imgs[i]);
        }
    }

    window.addEventListener("load", function () {
        // 1) Clean everything once the page is fully loaded
        processAllImages(document);

        // 2) Watch for new images added after load
        var observer = new MutationObserver(function (mutations) {
            for (var i = 0; i < mutations.length; i++) {
                var m = mutations[i];

                // Directly added <img> nodes
                for (var j = 0; j < m.addedNodes.length; j++) {
                    var node = m.addedNodes[j];
                    if (node.nodeType !== 1) continue; // ELEMENT_NODE only

                    if (node.tagName === "IMG") {
                        stripAbsolute(node);
                    }

                    // Any <img> descendants inside added subtree
                    processAllImages(node);
                }
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
})();