Moving image becomes 404 in Chrome

izcoser commented 6 months ago

Describe the bug

In Google Chrome desktop, images animated and moving around the screen go 404 randomly. In the console, the error appears as the already loaded image gose 404: "Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR"

To Reproduce

Look at this:

https://boymilk.neocities.org/

Expected behavior

Images do not 404.

Screenshots

The issue only ever happens in Chrome not in Firefox.

Reproducible example:

<html>
    <head>
        <link rel="stylesheet" href="main.css">
        <script src="anime.min.js"></script>
    </head>
    <body>
        <div id="overlay" class="centered">
            CLICK HERE!!
        </div>

        <div id="page" style="display: none">
            <div class="scale image">
                <img src="gif.gif" class="spin">
            </div>

            <div class="flute image">
                <img src="biscoitinha.gif" class="scale">
            </div>

            <div class="hakase1 image">
                <img src="hakase.gif" class="scale">
            </div>

            <div class="hakase2 image">
                <img src="hakase2.gif" class="scale">
            </div>

            <div class="hakase3 image">
                <img src="hakase3.gif" class="scale">
            </div>

            <div class="lol image">
                <img src="lol.gif" class="scale">
            </div>

            <div class="lol image">
                <img src="akarin.gif" class="scale">
            </div>

            <div class="lol image">
                <img src="sagiri.gif" class="scale">
            </div>

            <div class="lol image">
                <img src="kanna.gif" class="scale">
            </div>

            <audio loop style="display: none" id="audio">
                <source src="https://files.catbox.moe/fb7kjj.mp3" type="audio/mpeg">
            </audio>

                <a class="twtlink" href="https://x.com/boymilketh">&#120143;</a>
        </div>
    </body>

    <script>
        const getRandomNumber = (num) => {
            return Math.floor(Math.random() * (num + 1));
        };

        const move = () => {
            for(const element of Array.from(images)){
                const top = getRandomNumber(window.innerHeight - element.offsetHeight);
                const left = getRandomNumber(window.innerWidth - element.offsetWidth);

                animateMove(element, "left", left).play();
                animateMove(element, "top", top).play();    
            }
        }
        console.log("nigga");
        const overlay = document.getElementById("overlay");
        const audio = document.getElementById("audio");
        const page = document.getElementById("page");
        overlay.addEventListener("click", () => {

        page.style.display = "block";
        audio.play();
        overlay.style.display = "none";

    } );
        document.getElementById("audio").play();

        const images = document.getElementsByClassName("image");

        console.log(images);

        const animateMove = (element, prop, pixels) =>
        anime({
            targets: element,
            [prop]: `${pixels}px`,
            easing: "linear",
            duration: 100,
        });

        setInterval(move, 200);
    </script>
</html>

different55 commented 6 months ago

I can't reproduce this bug in Chrome on my machine.

You should review your reproducible examples to make sure they have any erroneous debugging calls removed if you're going to post them in public.

izcoser commented 6 months ago

@different55 did you open the link I passed in Chrome? That's a live example, even better than a reproducible example!

juliangarnier commented 6 months ago

I can't reproduce the bug on my machine, but even if I could, I highly doubt the 404 error on the images is related to the anime.js.

I'm closing for now, feel free to re-open if you find a direct link to your issue and anime.js.

Thanks

juliangarnier / anime

Moving image becomes 404 in Chrome #895