Jump to content

Recommended Posts

Posted

I noticed Command Deck has a tiny amount of page scrolling even though the UI looks like it’s intended to be fixed to the viewport.

I ran into almost exactly this on my own site. In my case an off-canvas drawer extended beyond the visible frame and was still contributing to root overflow. The fix was to make the page shell itself the positioned clipping boundary:

.site-shell {

  position: relative;

  overflow: hidden; /* fallback */

  overflow: clip;

}

Might be worth checking whether one of Command Deck’s translated/off-screen panels, drawers, decorative elements, etc. is extending the document bounds. It can produce only a few pixels of scroll and be surprisingly easy to miss.

Posted

Quick follow-up after looking into this further. I was able to reproduce and fix the similar scrolling issue on my own site. In my case it turned out to be genuine responsive-layout overflow rather than a stale browser scrollbar. At short landscape heights, the content was only a few pixels taller than the available viewport.

Looking more closely at my Command Deck recording, I noticed something that may help narrow this one down too: near the end, the menu reflows and extends onto an additional row. That seems like it could be increasing the overall page height just enough to create the slight vertical scrolling.

It might be worth checking scrollHeight vs clientHeight at these short landscape viewport heights and whether the menu wrapping is what pushes the document beyond the viewport.

On my site I fixed the equivalent problem by slightly compacting the landscape-only layout so the content fit, while keeping normal scrolling as a fallback for genuinely shorter screens. After making that change, I confirmed the issue is completely gone on my phone.

Obviously Command Deck may have a different underlying layout, but hopefully the menu reflow gives you a useful place to look.

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...