Protocol - header disappearing in Safari

[devopsbarista]

What component (if applicable)

• URL for category: https://tailwindui.com/templates
• Component name: Protocol

Describe the bug
Noticed weird behavior in Safari (both MacOS and iPadOS) 😅. When you add more menu items to the sidebar forcing the Y overflow, the header completely disappears. Can also be replicated by simply opening the preview (https://protocol.tailwindui.com/) in Safari and resizing the window vertically to force the scroll in the sidebar.

To Reproduce
As described above.

Expected behavior
The header shouldn't disappear

Screenshots
If applicable, add screenshots to help explain your problem.

Browser/Device (if applicable)

• OS: MacOS Ventura
• Browser: Safari
• Version: 16.x

Additional context
Works as expected in Chrome

[adamwathan]

Well that's a weird one 😅 Thanks for the report, we'll dig in to this when we're back from Christmas break!

[adamwathan]

Spent a couple minutes just trying to at least diagnose the cause, it looks like it’s because of the overflow-y-auto on the wrapper element that wraps the sidebar and header. Will have to figure out a different way to implement that part.

[devopsbarista]

Well that's a weird one 😅 Thanks for the report, we'll dig in to this when we're back from Christmas break!

@adamwathan Thanks very much for looking into this. May your holiday be blessed with the love and warmth of family and friends. Merry Christmas 🎄

[bradlc]

Hey @cloudgrind, thanks for reporting this!

We have now resolved the issue and updated the template download. For reference the changes were to line 42 of src/components/Header.jsx, which now looks like this:

'fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80',

And the motion.header element in src/components/Layout.jsx which now looks like this:

<motion.header
  layoutScroll
  className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
>
  <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:px-6 lg:pt-4 lg:pb-8 lg:dark:border-white/10 xl:w-80">
    <div className="hidden lg:flex">
      <Link href="/" aria-label="Home">
        <Logo className="h-6" />
      </Link>
    </div>
    <Header />
    <Navigation className="hidden lg:mt-10 lg:block" />
  </div>
</motion.header>

Thanks again!