Skip to content

Drawing between pixels by default, gliding boxes, zoomed pages, and a measured comparison - #14

Merged
arcwrightstudio merged 2 commits into
mainfrom
whole-pixel-ending
Oct 23, 2026
Merged

arcwrightstudio merged 2 commits into
mainfrom
whole-pixel-ending

Conversation

@arcwrightstudio

@arcwrightstudio arcwrightstudio commented Oct 23, 2026 •

Copy link
Copy Markdown
Owner

Drawing between pixels is on by default and scrolling boxes glide by default (see CHANGELOG.md), with a measured comparison in the README.

  • Svifa chooses the blocks that scroll with the content and gives each a layer of its own, split around fixed elements and z-indexes that reach past a block. Where a layer would change what is drawn over what, it draws on whole pixels and says why once in the console. data-svifa-subpixel="off" and subpixel: false turn it off.
  • Scrolling boxes inside the scroller glide with the same feel and hand the wheel on at their end. nested: 'native' leaves them to the browser and a function decides for each box. While the page glides, a box's content moves with it exactly.
  • Zoomed to a part of a pixel (a browser zoom such as 80% or a screen scale such as 125%), the page and its boxes are drawn from where the browser draws the scroll position, so a glide no longer shimmers. The position Svifa reports is unchanged. Tests cover a device scale of 0.8, 0.9, 1.25 and 1.5 in every engine and the browser's own zoom at 80% and 125% in Chromium.
  • At such a scale, before the browser shows which places it keeps, a glide is never reported past where it was sent, and a glide on whole pixels never takes its last pixel early.
  • Drawn on whole pixels, a glide keeps an even pace to its end.
  • A glide drawn between pixels never runs past the end of the page, and in Firefox the wheel over a textarea stays with the textarea.
  • The README compares Svifa with the most used smooth scroll libraries, measured on the same page in Chrome, Edge, Firefox and WebKit.
  • Tests for something only some engines have are tagged and run only there; none is reported skipped. The property tests also run at a device scale of 1.25.

Drawing between pixels is on by default and scrolling boxes glide by
default (see CHANGELOG.md).

- Svifa chooses the blocks that scroll with the content and gives each
a layer of its own, split around fixed elements and z-indexes that
reach past a block. Where a layer would change what is drawn over what,
it draws on whole pixels and says why once in the console.
`data-svifa-subpixel="off"` and `subpixel: false` turn it off.
- Scrolling boxes inside the scroller glide with the same feel and hand
the wheel on at their end. `nested: 'native'` leaves them to the
browser and a function decides for each box. While the page glides, a
box's content moves with it exactly.
- Zoomed to a part of a pixel (a browser zoom such as 80% or a screen
scale such as 125%), the page and its boxes are drawn from where the
browser draws the scroll position, so a glide no longer shimmers. The
position Svifa reports is unchanged.
- Drawn on whole pixels, a glide keeps an even pace to its end.
- A glide drawn between pixels never runs past the end of the page, and
in Firefox the wheel over a textarea stays with the textarea.
- Tests for something only some engines have are tagged and run only
there; none is reported skipped.

Signed-off-by: Amit Narwal <amit@arcwright.studio>
- The README compares Svifa with the most used smooth scroll
libraries, measured on the same page: the end of a glide recorded
from a 254 Hz screen in Chrome, Edge, Firefox and WebKit, and what
each does with sticky elements, find in page, scroll-driven
animations, scrolling boxes, snapping, same-page links, reduced
motion, the keyboard, size and dependencies.
- Before the browser shows which places it keeps, a glide drawn
between pixels at 125% could report a position just past where it
was sent; once the browser shows it keeps whole CSS pixels, a glide
already past the place it then aims at is held there.
- Drawn on whole pixels at such a scale, a glide could take its last
pixel early; until the browser shows its grid, it rests only once it
is on its last pixel on both grids.
- The property tests also run at a device scale of 1.25, and each
case they found is a test of its own.

Signed-off-by: Amit Narwal <amit@arcwright.studio>
@arcwrightstudio arcwrightstudio changed the title Drawing between pixels by default, gliding boxes, and zoomed pages Drawing between pixels by default, gliding boxes, zoomed pages, and a measured comparison Oct 23, 2026
@arcwrightstudio
arcwrightstudio merged commit df4abfc into main Oct 23, 2026
10 checks passed
@arcwrightstudio
arcwrightstudio deleted the whole-pixel-ending branch October 23, 2026 07:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants