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 (
+
+