Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flash of Unstyled Content in Safari for quickstart plus a CSS file #2700

Closed
thomasballinger opened this issue Nov 4, 2024 · 4 comments
Closed

Flash of Unstyled Content in Safari for quickstart plus a CSS file #2700

thomasballinger opened this issue Nov 4, 2024 · 4 comments

Comments

@thomasballinger
Copy link
Contributor

thomasballinger commented Nov 4, 2024 •
edited
Loading

Which project does this relate to?

Start

Describe the bug

I see a flash of unstyled content for a pretty minimal setup.

  1. follow the getting started guide
  2. add a CSS file (I used div { border: solid 20px red; } in app/styes/app.css and loaded it by adding
import appCss from "../styles/app.css?url";
...
export const Route = createRootRoute({
  ...
  links: () => [{ rel: "stylesheet", href: appCss }],
  ...

to createRootRoute in app/routes/__root.tsx
3. deploy to Vercel with build command npm run build
4. turn off the Vercel toolbar and Vercel protection (the vercel toolbar seems necessary, not sure on the latter)

Your Example Website or App

https://start-repro.vercel.app

Steps to Reproduce the Bug or Issue

Here's the repo, deploy it on Vercel and turn off the toolbar.

Here's the link where I have it deployed: https://start-repro.vercel.app/

Load the page in desktop Safari on a mac. Load it a few times, notice the flash. Especially noticeable on an iphone for me.

Or clone the repo, npm i; npm run dev, open it in Safari and open network dev tools and disable caches to debug the dev build.

Expected behavior

I expect no flash.

Screenshots or Videos

flash-repro.mov

Platform

  • OS: macOS, iOS
  • Browser: Safari

Additional context

No response
@thomasballinger
Copy link
Contributor Author

Noteably there's not hydration error visible in the console here.

@thomasballinger
Copy link
Contributor Author

thomasballinger commented Nov 4, 2024 •
edited
Loading

Oh cool, I can repro locally with

npx vinxi build --preset node-server
npx vinxi start

or even dev

npm run dev

if I open in Safari and click "Disable Caches" in the Network devtools tab

@thomasballinger
Copy link
Contributor Author

thomasballinger commented Nov 5, 2024 •
edited
Loading

Here's a maybe interesting diff? By stepping through the React code (in dev mode, where I could repro this issue) I saw React first committing the body, then later the head. prettier.format(console.log($('html').innerHTML)) before and after got me this diff. https://gist.github.com/thomasballinger/679ef30071a682cb5da3738940140b5b

--- stuff.html	2024-11-04 18:33:00
+++ right.html	2024-11-04 17:09:24
@@ -1,15 +1,21 @@
-<head></head>
+<head>
+  <meta name="tsr-meta" />
+  <title>TanStack Start Starter</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/_build/app/styles/app.css" />
+  <meta name="/tsr-meta" />
+</head>
 <body>
   <div id="root">
-    <!--$--><button type="button">Add 1?</button
-    ><!--/$-->
+    <!--$--><button type="button">Add 1?</button><!--/$-->
     <script>
       window.__vite_plugin_react_preamble_installed__ = true;
     </script>
     <script
       src="/_build/@fs/Users/tomb/start-repro/app/client.tsx"
       type="module"
       async=""
     ></script>
   </div>
 </body>

hopefully that's not something I got because I hacked up my React source. Any leads on why React might commit these separately?

@thomasballinger thomasballinger changed the title Flash of Unstyled Content for quickstart plus a CSS file Flash of Unstyled Content in Safari for quickstart plus a CSS file Nov 5, 2024
@thomasballinger
Copy link
Contributor Author

thomasballinger commented Nov 18, 2024 •
edited
Loading

This is resolved now! The repro has changed a little because of the new structure of head / links.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@thomasballinger