search

TylerBarnes / gatsby-plugin-transition-link

A link component for page transitions in gatsby
537 stars 70 forks source link

AniLink keeps scroll position on mobile #185

Closed developer-bart closed 4 years ago

developer-bart commented 4 years ago

Hi,

First off; I absolutely love your work! So far it works really well and it's so easy to use. I did however got stuck on something where I couldn't quite figure out how to fix this.

I'm using the AniLink with the fade transition. When on any regular browser this works fine and as expected. Although when I click the AniLink on my mobile browser (Safari on iOS 13.3.1) it opens the new page on the same scroll position I left the other page. So in many use cases this means the end-user will start the new page on the bottom instead of the top.

Am I doing anything wrong or is this a known bug?

The way I'm using the AniLink is pretty basis.

import AniLink from "gatsby-plugin-transition-link/AniLink"

<AniLink to="/" fade>Home</AniLink>

I've done nothing special to the config:

plugins: [
    `gatsby-plugin-transition-link`,
]
ajayns commented 4 years ago

I'm noticing this on Desktop too actually. After the transition, the page is initially in a scrolled state and then quickly jumps into the page top just as the transition completes. This makes the whole motion jerky.

I hadn't noticed this before and it just came up recently so could it possibly be a bug with any recent update?

developer-bart commented 4 years ago

Okay so I figured out why this broke on mobile views. This was because my mobile menu was setting a overflow: hidden; on the body when the menu was active so that the page could not be scrolled when the menu was open. This however stopped the AniLink from scrolling to the top of the page. Removing this fixed the problem :) I will be closing this issue.

TylerBarnes commented 4 years ago

Glad to hear you sorted it out!