Unwanted offset of text-anchored elements with # in URL

[nepomuc]

This is:

• Bug

Specifications

• AOS version: 3.0.0-beta.6
• OS: Win
• Browser: Chrome 83.0.4103.106

Expected Behavior

When opening a URL like https://example-com#text-anchor I expect the browser to jump to the element with id="text-anchor".

Actual Behavior

The browser scrolls too far because of data-aos="fade-up" which has a CSS rule that does transform: translate3d(0,100px,0). Using other animations like "zoom-in" works better but still not perfectly.

data-aos="fade-up"

data-aos="zoom/in"

Steps to Reproduce the Problem

Create an element that's below the fold and try to use a text anchor by calling it's id in the URL and use data-aos="fade-up" for a significant unwanted offset.

Possible Solution

Adding the css-transform at the beginning of the animation and not on page-load should enable the browser to scroll to the correct final position of the element.

[gchtr]

I also ran into this problem. It can be observed in the following pen: https://codepen.io/gchtr/pen/KKgXRPP, where I prepared some anchor links that result in different scroll positions depending on which animation is used.

Obviously, this is only a problem with animations that use vertical transforms that change the initial position a browser will scroll to.

#478 is probably the same issue. And maybe #466 as well.

[mohnish25]

@nepomuc can you please elaborate on you possible solution "Adding the css-transform at the beginning of the animation and not on page-load should enable the browser to scroll to the correct final position of the element."

[nepomuc]

@mohnish25 For example, when using the "zoom-in":

There's a CSS rule, which sets the scale of the animated element to .6 for all elements using data-aos=zoom-in:

html:not(.no-js) [data-aos=zoom-in] {
    -webkit-transform: scale(.6);
    transform: scale(.6);
}

The browser waits for all CSS to load and apply, before it's going to jump to the destinated element. So it respects these new dimensions of the transformed element, when jumping to it's position. But as soon as the element appears in the viewport, AOS runs the zoom-in animation and the element grows to scale(1). Since the browser already did it's scrolling caused by the # it won't adapt the scroll position to the new size of the element.

Solution: Don't set the scale(.6) immediately when the page loads. Set it as soon as AOS recognizes "Oh, it's time to start the animation!". The elements are opacity:0 anyways. I'm hoping this explanation will help you understanding what I meant. :)

Thanks for adressing this issue!

[lindsayweb]

I came here looking for a solution to this same issue. Did anyone find a workaround? My anchor links end up at totally random places because of AOS fade-up or slide-up animations above the section I'm linking to.

UPDATE: Nevermind. My issue was actually being caused by Lazyloading. Once I turned that off, my anchor links worked. It was not related to AOS. I'll leave this here in case someone else has the same issue.