forked from crowetic/commerce
fix(css): apply workaround for chrome bug (#146)
This commit is contained in:
parent
eedfdc0a10
commit
b6f80b7245
12
assets/chrome-bug.css
Normal file
12
assets/chrome-bug.css
Normal 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;
|
||||
}
|
@ -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
23
pages/_document.tsx
Normal 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
|
Loading…
x
Reference in New Issue
Block a user