Misskey Login/Welcome Page Layout#

Overview#

The welcome/login page (/ for unauthenticated visitors) is composed of layered Vue components with carefully separated scroll contexts. The entry point is welcome.vue, which renders one of three sub-pages depending on instance state:

• XSetup — first-run setup flow
• XEntranceClassic — the default "classic" style (controlled by instance.clientOptions.entrancePageStyle)
• XEntranceSimple — an alternate simpler layout

Classic Layout: Component Layers (welcome.entrance.classic.vue)#

The classic entrance 1 assembles several independently positioned layers inside a single .root container:

All decorative layers (background, shapes, logo, federation bar) are fixed, so they stay in place while only .contents scrolls 2.

Scroll Management#

Root container scroll context#

The .root element in both classic and simple entrances uses 3:

height: 100cqh;
overflow: auto;
overscroll-behavior: contain;

• 100cqh — sizes the root to the container's query height, not the viewport, to avoid iOS Safari bounce affecting the full page.
• overflow: auto — creates a self-contained scroll context; the fixed-positioned children anchor to the viewport within this scroll container.
• overscroll-behavior: contain — prevents scroll chaining to the outer document so overscrolling the welcome page doesn't trigger browser navigation gestures or bounce effects.

Global body/html scroll containment#

At the global level, html, body, #misskey_app all have overscroll-behavior: none and body has overflow: clip 4. This means no scroll can escape to the document root — the welcome page's .root is the sole scroll surface.

._pageContainer and ._pageScrollable utility classes#

For other pages in the app, style.scss defines reusable scroll primitives 5:

• ._pageContainer: overflow: auto; overscroll-behavior: contain with container-type: size — this is what provides the cqh unit used by the welcome root.
• ._pageScrollable: overflow-y: scroll; overscroll-behavior: contain; background: var(--MI_THEME-bg) — the background is required to keep this container on the GPU compositor thread in Chrome (as noted in the source comments).

Visitor Dashboard (MkVisitorDashboard.vue)#

MkVisitorDashboard renders inside .contents and provides:

• Instance icon, name, description, registration warnings
• "Join this server," "Explore other servers," and "Login" action buttons 6
• Optional stats grid (users/notes counts) and a local timeline preview 7

The login button calls os.popup(XSigninDialog, ...) 8 which opens MkSigninDialog — a modal dialog layered on top of the welcome page.

Sign-in Dialog (MkSigninDialog.vue)#

MkSigninDialog wraps MkSignin inside MkModal and is sized as a fixed-center dialog 9:

• Max 400px × 450px, overflow: auto
• Sticky header with blur backdrop (position: sticky; top: 0) 10

Timeline Panel (welcome.timeline.vue)#

The right-side scrolling timeline is purely decorative and uses CSS @keyframes animations (scrollIntro → scrollConstant) driven by transform: translate3d for GPU acceleration. It pauses on hover via :has(.note:hover). Hidden below 1200px viewport width via media query 11.

Key Files#