Page component with a title causes a hydration mismatch on small breakpoints

[SecretPocketCat]

Summary

Using the Page component with a header (e.g. setting the title prop) causes a hydration mismatch on small breakpoints.

<Page title="Hello hydration mismatch">Make me small and refresh</Page>

Expected behavior

SSR works fine on all breakpoints.

Actual behavior

Wrap animated gifs/videos in a details tag:

Hydration mismatch on small breakpoint

<div aria-expanded="true" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; outline-width: 0px; flex: 0 0 auto; color: rgb(227, 227, 227); font-family: &quot;dejavu sans mono&quot;, monospace; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(78, 53, 52); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="source-code" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--source-code-font-family); white-space: pre-wrap; font-size: var(--source-code-font-size) !important; line-height: 1.2;"><span class="console-message-anchor" style="box-sizing: border-box; min-width: 0px; min-height: 0px; float: right; text-align: right; max-width: 100%; margin-left: 4px;"><span class="devtools-link ignore-list-link" role="link" tabindex="-1" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=f5cbcba1:521" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;"><br class="Apple-interchange-newline">chunk-ZRJG7NCB.js?v=f5cbcba1:521</span> </span><span class="console-message-text" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--override-error-text-color) !important;">Warning: Did not expect server HTML to contain a &lt;div&gt; in &lt;div&gt;.
    at div
    at ConditionalRender (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:20889:3</span>)
    at FilterActionsProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:18265:13</span>)
    at div
    at div
    at <span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:17765:7</span>
    at Header4 (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:40291:3</span>)
    at div
    at Page (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:40580:13</span>)
    at Index (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app._index/route.tsx?t=1712903960413" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app._index/route.tsx?t=1712903960413:10:7</span>)
    at RenderedRoute (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5</span>)
    at Outlet (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1091:26</span>)
    at EphemeralPresenceManager (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6074:13</span>)
    at FocusManager (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6026:13</span>)
    at PortalsManager (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:5979:13</span>)
    at MediaQueryProvider2 (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:5910:17</span>)
    at AppProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6155:9</span>)
    at AppProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/@shopify_shopify-app-remix_react.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/@shopify_shopify-app-remix_react.js?v=f5cbcba1:485:9</span>)
    at App (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app/route.tsx" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app/route.tsx:23:7</span>)
    at RenderedRoute (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5</span>)
    at RenderErrorBoundary (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1305:9</span>)
    at Outlet (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1091:26</span>)
    at div
    at body
    at html
    at App
    at RenderedRoute (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5</span>)
    at RenderErrorBoundary (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1305:9</span>)
    at DataRoutes (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:2001:5</span>)
    at Router (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1098:15</span>)
    at RouterProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1818:5</span>)
    at RemixErrorBoundary (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:6717:9</span>)
    at RemixBrowser (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:7457:46</span>)</span></span></div><div class="" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 0 0 auto; color: rgb(227, 227, 227); font-family: &quot;dejavu sans mono&quot;, monospace; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(78, 53, 52); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="monospace stack-preview-container" style="display: inline-block; width: 775.6px; --monospace-font-size: 11px; --monospace-font-family: dejavu sans mono,monospace; --source-code-font-size: 11px; --source-code-font-family: dejavu sans mono,monospace; box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--monospace-font-family); font-size: var(--monospace-font-size) !important;">
  | printWarning | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:521
-- | -- | -- | --
  | error | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:505
  | warnForDeletedHydratableElement | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:7993
  | didNotHydrateInstance | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:8720
  | warnUnhydratedInstance | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:9325
  | warnIfUnhydratedTailNodes | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:9636
  | popHydrationState | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:9612
  | completeWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:16273
  | completeUnitOfWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19220
  | performUnitOfWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19202
  | workLoopConcurrent | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19185
  | renderRootConcurrent | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19160
  | performConcurrentWorkOnRoot | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:18674
  | workLoop | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:197
  | flushWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:176
  | performWorkUntilDeadline | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:384

</span></div>

Steps to reproduce

sandbox does not log hydration mismatches, so probably not relevant here

1. Create a page component with the title prop

<Page title="Hello hydration mismatch">Make me small and refresh</Page>

2. Make the window small
3. Refresh
4. Look for hydration mismatch logs in the console

Are you using React components?

Yes

Polaris version number

12.23.0

Browser

Chrome (122.0.6261.128)

Device

PC (Linux)

[Nedomas]

I am getting this too. I get this when using title, titleMetadata, backAction or secondaryActions on Page. Haven’t tested other Page props, but it looks like many of those could affect the SSR vs hydrated Page component. As far as I understand this also trips LCP scores.