Home Search Pricing Get inErrata About

Sign in Sign up

Graph/viewport-relative-position-drift

AntiPattern

Viewport-Relative Position Drift

viewport-relative-position-drift

Viewport-relative positioning and scroll calculations drift because fixed/sticky elements ignore header offsets or element widths, and cursor/scroll handlers assume stable viewport geometry, causing misaligned centering and skipped auto-scroll under zoom/fullscreen.

Node Details

Public graph metadata

Updated7/7/2026

Connections

30 linked nodes

MATCHESSolution

We can temporarily fix this by overriding the behavior using css. — html body[data-scroll-locked]. Tension: the automatic scroll lock when opening a menu. Outcome: overflow: visible !important; margin-right: 0 !important;.

MATCHESSolution

Update Vaul to the latest version and ensure the drawer input container uses an overflow scrolling behavior (e.g., add className="overflow-auto" to the container, possibly removing/avoiding ScrollArea if not needed).

MATCHESSolution

Modify the shadcn NavigationMenuViewport styling/positioning logic (as shown by adjusting the NavigationMenuViewport component) so the viewport is aligned differently—e.g., not always centered—thereby preventing overflow when the expanded content is too wide.

MATCHESSolution

set both flex-1 and a random width (I set w-1) to the ScrollArea — make it fill the parent width. Tension: I found a little trick to make it fill the parent width. Outcome: set both flex-1 and a random width (I set w-1) to the ScrollArea.

MATCHESSolution

.dnd-scroll-container { overscroll-behavior: none; scroll-snap-type: both mandatory; } — Add this classes to your scrollable container. Tension: neither overscroll-behavior nor scroll-snap-stop worked. Outcome: .dnd-scroll-container > * { scroll-snap-align: start; }.

MATCHESSolution

rendering the rows as a non complex component like a spinner or something — my laggy components were loading in as i scrolled etc. Tension: excessive blanking of the page. Outcome: using useEffect to determine if it is fully rendered, you can resolve most of the major blanking issues.

MATCHESSolution

window.Element.prototype.getBoundingClientRect = jest .fn() .mockReturnValue({ height: 1000, width: 1000 }); — my test file. Tension: react-virtual uses getBoundingClientRect to setup its rect. Outcome: this snippet to my test file.

MATCHESSolution

Worked around the issue by passing scrollYProgress to the LiIcon component instead of passing the ref — const { scrollYProgress } = useScroll({ target: ref, offset: ['center end', 'center center'], });. Tension: the circles seem to be using all the same ref. Outcome: Worked around the issue by passing scrollYProgress to the LiIcon component instead of passing the ref.

MATCHESSolution

Constrain the `overflow-y-auto` parent to a fixed/viewport-based height (e.g., by placing it inside a vertical flex container that fills the remaining viewport height) so it can overflow and become the real scroll container. Once the parent actually scrolls, the snap properties on the parent and cards will work.

MATCHESSolution

In Rolldown-Vite. Tension: Since you did not provide extra targets for your project, it worked with the default targets. Outcome: it will not make your code compatible with older browsers.

MATCHESSolution

Adjust the main content height to account for the Navbar height (e.g., use a reduced height like h-[100vh-<navbarHeight>] or otherwise subtract the navbar height from the full-page container) so the layout no longer exceeds the viewport.

MATCHESSolution

A perfect use case for anchor positioning even if the support is still not good — section:after { content: ""; position: absolute; height: 2px; background-color: red;. Outcome: inset: auto anchor(--C right) anchor(--B bottom) anchor(--A left);.

MATCHESSolution

Alternative: update height manually — I set up a function on the textarea's input event. Tension: ensuring that the text will always be fully visible. Outcome: automatically adjusts the textarea's `height` to its `scrollHeight`.

MATCHESSolution

Center the absolutely positioned menu by using `left-1/2` and applying `-translate-x-1/2` (e.g., `className="absolute left-1/2 -translate-x-1/2"`) instead of hardcoded left/right percentages.

MATCHESSolution

Remove or replace `min-h-screen` on the container (or use `h-screen`/adjust flex sizing) so the layout fits within the viewport. Alternatively, hide the scrollbar via CSS on the `html/body` or the specific container (e.g., set `scrollbar-width: none` and `body::-webkit-scrollbar { display: none; }`).

MATCHESSolution

Change the positioned element to a different positioning mode (e.g., `position: absolute` instead of `fixed`) or otherwise avoid `fixed`/`sticky` for the scrolling container so auto-scroll works.

MATCHESSolution

Set a wrapper around the sticky element, and handle the generated white space via transform — sticky element. Tension: prevent the layout shift. Outcome: CodeSandbox Solution.

MATCHESSolution

Use a workaround that forces higher-resolution rasterization before applying 3D transforms, such as pre-scaling the SVG (e.g., `scale(2)`), applying the 3D transform on a parent element, then scaling the parent back to the original size (e.g., `scale(0.5)`). This can reduce the blur without switching from SVG (Recharts) to Canvas.

MATCHESSolution

You can create a scrollable tooltip : — external HTML tooltip referencing the official document. Tension: I am not sure how to make it scrollable. Outcome: import React, { useEffect, useRef, useState } from "react";.

MATCHESSolution

resize events often occur as many events in quick succession. Tension: the resize behaviour is also a little broken. Outcome: React queues the update.

MATCHESSolution

finally I round the AutoResizer outer level need the div element to take place the position — this is the new code to make it works. Tension: the page just did not render and all page turn to grey blank. Outcome: this is the new code to make it works.

MATCHESSolution

Ensure there are no overflow/extra scrollers that interfere (the ScrollTrigger starter element is within the viewport), and configure ScrollTrigger to use the correct scroller (e.g., set `scroller: window` if the page scroll is the intended scroller), so markers remain fixed and triggers fire.

MATCHESSolution

Per suggestion from @ataman comment I used useEffect() instead of winow.onload — on both web browsers, PC and mobile. Tension: it works on both web browsers, PC and mobile.

MATCHESSolution

Use a ResizeObserver on the parent container ref to read clientWidth/clientHeight and update the Stage width/height whenever the container size changes (including on sidebar resize).

MATCHESSolution

You should use any one — to get position from top. Tension: it represents the scroll position relative to the top of the viewport. Outcome: I'd recommend you to use `window.pageYOffset`.

MATCHESSolution

You can retrieve the current X and width by querying the parent `JViewport`. Tension: bounds.setLocation(parentViewport.getViewPosition().x, (int) bounds.getLocation().getY());. Outcome: bounds.setSize(parentViewport.getExtentSize().width, (int) bounds.getSize().getHeight());.

MATCHESSolution

Can you try this? — new UiScrollable(new UiSelector().scrollable(true)). Tension: the screen is swipped from bottom to top first. Outcome: `scrollForward()` will make sure the screen is swipped from bottom to top first.

MATCHESSolution

VirtualGrid only creates panels for visible items — large scrollable lists. Tension: regular panel children causes severe performance issues. Outcome: only visible items are rendered.

MATCHESSolution

Keep menu screens and in-game overlays in separate input modes. — Startup/customization menus can force Mouse.Visibility = Visible and keep pointer events enabled. Tension: Startup/customization menus can force Mouse.Visibility = Visible and keep pointer events enabled because they are actual UI scenes. Outcome: Fix pattern:.

MATCHESSolution

where center is the player's click point with their view yaw as rotation identity.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata