Animations snapping into place on iOS Chrome

[Fuego314]

Animations are snapping into place when viewing a site on the iOS version of Chrome. I’ve looked on both Safari and Brave browsers and the issue isn’t there, everything works as it’s meant to. This issue is showing on multiple sites.

This is:

• Bug

Specifications

• AOS version: Latest
• OS: iOS 12
• Browser: Chrome - 70.0.3538.75

Expected Behavior

Animations to transition in smoothly.

Actual Behavior

Animation plays slightly and then snaps into the final position.

Can send links/screen recordings privately if you’d like to see the issue for yourself

[proxygear]

Same problem on macOS. The animations are playing well, but get artifacts at the bottom of the page :

• extra space
• sometime empty
• sometimes containing the animated element previously scrolled

[lukasfarina]

Something new?

[jrmyptrs]

This is still an issue. Has anyone had any luck fixing?

[hannahjohnson438]

Can confirm also having this problem on MacOS on Safari. When testing in-browser turning the animation affect off and on shows a smooth transition, but on first load the animation gets about half way and then 'snaps'

[MatthewLoveday]

Still an issue on chrome IOS, any news on this?

[cruzgodar]

Still happening on iOS Safari. I’ve tried running AOS.refreshHard() as often as every page load, but the bug’s still there. What fascinates me about this bug is that it persists through page refreshes and progressively gets worse — the time the elements are actually animating is shorter and shorter. Only quitting Safari seems to resolve the issue.

Edit: okay, I found something that regularly causes this bug. On an iPad, tapping and holding on an image on a website picks it up like dragging does on a desktop. Picking up images this way and then just letting them go seems to cause this bug and make it worse with each image dragged.

...hell if I know how this could possibly do anything, though. It doesn’t look like anything’s being changed, but I would guess iOS/WebKit is messing with the offset of the images while they’re being dragged. Who knows.

[Wqrld]

Is there any workaround for disabling AOS animations on IOS?

[BraydenTW]

I'm having this same problem. It's been about a year now. Has anyone found a solution?

[cruzgodar]

Yes! In iOS 13, it seems like something changed under the hood with CSS transitions. The bug is still kinda present, but only when the delay is nonzero. I ended up rewriting all of AOS’s scroll detection manually and adding and removing zero-delay animations as necessary. Here’s what I ended up doing. It’s not elegant by any stretch, but it works perfectly! For reference, set_up_aos() is called on page load, and aos_resize() and aos_scroll() are bound to resize and scroll events, respectively.

function set_up_aos()
{
    aos_elements = [];

    let new_aos_elements = document.querySelectorAll("[data-aos]");

    let current_section = 0;
    let current_delay = 0;

    for (let i = 0; i < new_aos_elements.length; i++)
    {
        if (new_aos_elements[i].classList.contains("new-aos-section"))
        {
            //Create a new section.
            aos_elements.push([]);

            aos_currently_animating.push([]);

            current_section++;

            if (new_aos_elements[i].getAttribute("data-aos-delay") !== null)
            {
                current_delay = parseInt(new_aos_elements[i].getAttribute("data-aos-delay"));
            }

            else
            {
                current_delay = 0;
            }

            if (new_aos_elements[i].getAttribute("data-aos-offset") !== null)
            {
                aos_anchor_offsets[current_section - 1] = parseInt(new_aos_elements[i].getAttribute("data-aos-offset"));
            }

            else
            {
                aos_anchor_offsets[current_section - 1] = window_height / 4;
            }

            new_aos_elements[i].setAttribute("data-aos-offset", 1000000);
            new_aos_elements[i].setAttribute("data-aos-delay", 0);

            aos_elements[current_section - 1].push([new_aos_elements[i], current_delay]);

            aos_anchor_positions[current_section - 1] = new_aos_elements[i].getBoundingClientRect().top + window.scrollY;

            aos_anchors_shown[current_section - 1] = false;
        }

        else
        {
            if (new_aos_elements[i].getAttribute("data-aos-delay") !== null)
            {
                current_delay = parseInt(new_aos_elements[i].getAttribute("data-aos-delay"));
            }

            else
            {
                current_delay += 100;
            }

            new_aos_elements[i].setAttribute("data-aos-offset", 1000000);
            new_aos_elements[i].setAttribute("data-aos-delay", 0);

            aos_elements[current_section - 1].push([new_aos_elements[i], current_delay]);
        }
    }

    //At this point we have a list of all the AOS sections and their delays. Now whenever we scroll, we'll check each of the anchors to see if the scroll position is beyond the offset.

    aos_resize();
    aos_scroll();
}

function aos_resize()
{
    for (let i = 0; i < aos_elements.length; i++)
    {
        aos_anchor_positions[i] = aos_elements[i][0][0].getBoundingClientRect().top + window.scrollY;
    }

    fix_footer_aos_anchor();
}

function aos_scroll()
{
    for (let i = 0; i < aos_elements.length; i++)
    {
        if (scroll + window_height >= aos_anchor_positions[i] + aos_anchor_offsets[i] && aos_anchors_shown[i] === false)
        {
            show_aos_section(i);
        }

        else if (scroll + window_height < aos_anchor_positions[i] + aos_anchor_offsets[i] && aos_anchors_shown[i] === true)
        {
            hide_aos_section(i);
        }
    }
}

function show_aos_section(section)
{
    for (let i = 0; i < aos_elements[section].length; i++)
    {
        let refresh_id = setTimeout(function()
        {
            aos_elements[section][i][0].setAttribute("data-aos-offset", -1000000);

            AOS.refresh();
        }, aos_elements[section][i][1]);

        aos_currently_animating[section].push(refresh_id);
    }

    aos_anchors_shown[section] = true;
}

function hide_aos_section(section)
{
    try
    {
        for (let i = 0; i < aos_currently_animating[section].length; i++)
        {
            clearTimeout(aos_currently_animating[section][i]);
        }
    }

    catch(ex) {}

    aos_currently_animating[section] = [];

    for (let i = 0; i < aos_elements[section].length; i++)
    {
        aos_elements[section][i][0].setAttribute("data-aos-offset", 1000000);

        AOS.refresh();
    }

    aos_anchors_shown[section] = false;
}

[BraydenTW]

Thanks so much!

[iksent]

I am experiencing probably the same issue when setting up "delay" for elements. Reproduction: https://codepen.io/iksent/pen/bGwzWMd iOS 14 + Chrome (Safari - no problems) https://yadi.sk/i/rLT7Ctq8zTZVuQ