From b6f80b7245a86733359f017f790bf6c1e97052eb Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 6 Jan 2021 15:01:07 -0500 Subject: [PATCH] fix(css): apply workaround for chrome bug (#146) --- assets/chrome-bug.css | 12 ++++++++++++ pages/_app.tsx | 7 ++++++- pages/_document.tsx | 23 +++++++++++++++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 assets/chrome-bug.css create mode 100644 pages/_document.tsx diff --git a/assets/chrome-bug.css b/assets/chrome-bug.css new file mode 100644 index 000000000..245ec8f09 --- /dev/null +++ b/assets/chrome-bug.css @@ -0,0 +1,12 @@ +/** + * Chrome has a bug with transitions on load since 2012! + * + * To prevent a "pop" of content, you have to disable all transitions until + * the page is done loading. + * + * https://lab.laukstein.com/bug/input + * https://twitter.com/timer150/status/1345217126680899584 + */ +body.loading * { + transition: none !important; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index dabaaf8d0..132ce5f18 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,8 @@ import '@assets/main.css' import 'keen-slider/keen-slider.min.css' +import '@assets/chrome-bug.css' -import { FC } from 'react' +import { FC, useEffect } from 'react' import type { AppProps } from 'next/app' import { ManagedUIContext } from '@components/ui/context' @@ -12,6 +13,10 @@ const Noop: FC = ({ children }) => <>{children} export default function MyApp({ Component, pageProps }: AppProps) { const Layout = (Component as any).Layout || Noop + useEffect(() => { + document.body.classList?.remove('loading') + }, []) + return ( <> diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 000000000..c2baf322e --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,23 @@ +import Document, { + DocumentContext, + Head, + Html, + Main, + NextScript, +} from 'next/document' + +class MyDocument extends Document { + render() { + return ( + + + +
+ + + + ) + } +} + +export default MyDocument