yamosan / geikoten2021

https://geikousai-ncu.com/2021/
1 stars 0 forks source link

一部のモバイルブラウザでアドレスバー開閉時にレイアウトシフトが起きる #12

Open yamosan opened 3 years ago

yamosan commented 3 years ago

原因

gsapの横スクロールによって引き起こされている? 恐らくアドレスバーの伸縮によって、gsapのonRefresh(再計算)が呼ばれる為ずれる。

yamosan commented 3 years ago

応急処置

https://github.com/yamosan/geikoten2021/blob/main/src/components/pages/root/Project.tsx#L38-L42

      if (isMobile) {
        ScrollTrigger.config({
          autoRefreshEvents: "visibilitychange,DOMContentLoaded,load",
        });
      }

モバイルブラウザで閲覧時は、onResizeで再計算を行わないようにする。 これによって、セクションに入る前にレイアウトシフトが起きる問題は解決。 しかし、セクションに入っている時に上下にスクロールすると挙動がおかしい(LINEアプリ内ブラウザ)

yamosan commented 3 years ago