cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

fix(css): apply workaround for chrome bug (#146)

Browse Source
This commit is contained in:
Joe Haddad 2021-01-06 15:01:07 -05:00 committed by GitHub
parent eedfdc0a10
commit b6f80b7245
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/chrome-bug.css Normal file
View File

@ -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;
}

7
pages/_app.tsx
View File

@ -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 (
<>
<Head />

23
pages/_document.tsx Normal file
View File

@ -0,0 +1,23 @@
import Document, {
DocumentContext,
Head,
Html,
Main,
NextScript,
} from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body className="loading">
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument