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 '@assets/main.css'
|
||||||
import 'keen-slider/keen-slider.min.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 type { AppProps } from 'next/app'
|
||||||
|
|
||||||
import { ManagedUIContext } from '@components/ui/context'
|
import { ManagedUIContext } from '@components/ui/context'
|
||||||
@ -12,6 +13,10 @@ const Noop: FC = ({ children }) => <>{children}</>
|
|||||||
export default function MyApp({ Component, pageProps }: AppProps) {
|
export default function MyApp({ Component, pageProps }: AppProps) {
|
||||||
const Layout = (Component as any).Layout || Noop
|
const Layout = (Component as any).Layout || Noop
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.body.classList?.remove('loading')
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head />
|
<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