Blinking on IOS devices

[vannirriesarmiento]

Looks good on desktop & Android phones, but with IOS (both Safari & Chrome) the marquee blinks when it restarts the loop. Care to check on this? Will gladly appreciate!

[selemondev]

Hey there @vannirriesarmiento, is this issue occurring at the Logo section of the documentation site? If not, could you be able to provide a reproduction of this issue 😊?

[everythxxgs]

Same here

<script lang="ts">
    import { PUBLIC_INSTAGRAM } from "$env/static/public";
    import type { ChildrenResponse, MediaResponse } from "$lib/types";
    import axios from "axios";
    import { onMount } from "svelte";
    import { Marquee } from "@selemondev/svelte-marquee";

    // Reactive variable for images
    let images: { src: string; alt: string }[] = [];

    onMount(async () => {
        await fetchPosts();
    });

    const fetchPosts = async () => {
        const accessToken = PUBLIC_INSTAGRAM;
        const userId = "17841407184827389"; // Replace with your user ID
        const limit = 3;

        try {
            console.log("Fetching posts...");

            // Fetch posts
            const response = await axios.get(
                `https://graph.instagram.com/v16.0/${userId}/media`,
                {
                    params: {
                        fields: "id,media_type,permalink,media_url",
                        limit: limit,
                        access_token: accessToken,
                    },
                },
            );

            const posts = response.data.data as MediaResponse[];

            // Collect images from posts and children
            const newImages: { src: string; alt: string }[] = [];

            for (const post of posts) {
                if (post.media_type === "IMAGE") {
                    // Add image from main post
                    newImages.push({
                        alt: "Instagram post",
                        src: post.media_url,
                    });
                } else if (post.media_type === "CAROUSEL_ALBUM") {
                    // Fetch children for carousel
                    const childrenResponse = await axios.get(
                        `https://graph.instagram.com/v16.0/${post.id}/children`,
                        {
                            params: {
                                fields: "id,media_type,media_url",
                                access_token: accessToken,
                            },
                        },
                    );

                    const children = childrenResponse.data
                        .data as ChildrenResponse[];

                    children.forEach((media) => {
                        if (media.media_type === "IMAGE") {
                            newImages.push({
                                alt: "Instagram post",
                                src: media.media_url,
                            });
                        }
                    });
                }
            }

            // Update images reactively
            images = newImages;
        } catch (err) {
            console.error("Error fetching posts:", err);
        }
    };
</script>

<Marquee
    direction="left"
    fade={false}
    reverse={false}
    pauseOnHover={false}
    innerClassName=""
>
    {#each images as image}
        <img
            src={image.src}
            alt={image.alt}
            class="md:w-[200px] md:h-[200px] w-[100px] h-[100px] aspect-square object-cover object-top"
            draggable="false"
            loading="lazy"
        />
    {/each}
</Marquee>

[vannirriesarmiento]

Same here

<script lang="ts">
    import { PUBLIC_INSTAGRAM } from "$env/static/public";
    import type { ChildrenResponse, MediaResponse } from "$lib/types";
    import axios from "axios";
    import { onMount } from "svelte";
    import { Marquee } from "@selemondev/svelte-marquee";

    // Reactive variable for images
    let images: { src: string; alt: string }[] = [];

    onMount(async () => {
        await fetchPosts();
    });

    const fetchPosts = async () => {
        const accessToken = PUBLIC_INSTAGRAM;
        const userId = "17841407184827389"; // Replace with your user ID
        const limit = 3;

        try {
            console.log("Fetching posts...");

            // Fetch posts
            const response = await axios.get(
                `https://graph.instagram.com/v16.0/${userId}/media`,
                {
                    params: {
                        fields: "id,media_type,permalink,media_url",
                        limit: limit,
                        access_token: accessToken,
                    },
                },
            );

            const posts = response.data.data as MediaResponse[];

            // Collect images from posts and children
            const newImages: { src: string; alt: string }[] = [];

            for (const post of posts) {
                if (post.media_type === "IMAGE") {
                    // Add image from main post
                    newImages.push({
                        alt: "Instagram post",
                        src: post.media_url,
                    });
                } else if (post.media_type === "CAROUSEL_ALBUM") {
                    // Fetch children for carousel
                    const childrenResponse = await axios.get(
                        `https://graph.instagram.com/v16.0/${post.id}/children`,
                        {
                            params: {
                                fields: "id,media_type,media_url",
                                access_token: accessToken,
                            },
                        },
                    );

                    const children = childrenResponse.data
                        .data as ChildrenResponse[];

                    children.forEach((media) => {
                        if (media.media_type === "IMAGE") {
                            newImages.push({
                                alt: "Instagram post",
                                src: media.media_url,
                            });
                        }
                    });
                }
            }

            // Update images reactively
            images = newImages;
        } catch (err) {
            console.error("Error fetching posts:", err);
        }
    };
</script>

<Marquee
    direction="left"
    fade={false}
    reverse={false}
    pauseOnHover={false}
    innerClassName=""
>
    {#each images as image}
        <img
            src={image.src}
            alt={image.alt}
            class="md:w-[200px] md:h-[200px] w-[100px] h-[100px] aspect-square object-cover object-top"
            draggable="false"
            loading="lazy"
        />
    {/each}
</Marquee>

oops, i forgot abt this issue & if i remember correctly what helped me was adding this style on to every div in the marquee: -webkit-transform:translate3d(0,0,0); hopefully this works out for u!