Sitelet https://github.com/angular/components/pull/31940
Skip to content

fix(cdk/scrolling): prevent subpixel gaps in virtual scroll viewport - #31940

Merged
mmalerba merged 1 commit into
angular:mainfrom
Mr-KRAMA:fix/virtual-scroll-subpixel-gaps
Sep 30, 2025
Merged

fix(cdk/scrolling): prevent subpixel gaps in virtual scroll viewport#31940
mmalerba merged 1 commit into
angular:mainfrom
Mr-KRAMA:fix/virtual-scroll-subpixel-gaps

Conversation

@Mr-KRAMA

@Mr-KRAMA Mr-KRAMA commented Sep 29, 2025

Copy link
Copy Markdown
Contributor

This PR fixes the issue where cdk-virtual-scroll-viewport renders visible gaps between items at certain zoom levels or scroll positions.

Problem:
Thin gaps (~0.5px) appear between consecutive rows when using *cdkVirtualFor

Issue occurs due to subpixel rounding in offset calculations

Most noticeable when zooming browser window or at specific scroll positions

Solution:
Added Math.round() to the offset calculation in setRenderedContentOffset()

Ensures all item positions are rounded to whole pixels

Eliminates subpixel gaps while maintaining smooth scrolling

Changes:

Single line change in fixed-size-virtual-scroll.ts

Wraps this._itemSize * newRange.start with Math.round()

Testing
Tested with different zoom levels (300%)

Verified no gaps appear between items during scrolling

Confirmed smooth scrolling behavior is preserved

Fixes #31824

@Mr-KRAMA
Mr-KRAMA requested a review from a team as a code owner September 29, 2025 04:03
@Mr-KRAMA
Mr-KRAMA requested review from crisbeto and ok7sai and removed request for a team September 29, 2025 04:03
@google-cla

google-cla Bot commented Sep 29, 2025

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@Mr-KRAMA
Mr-KRAMA force-pushed the fix/virtual-scroll-subpixel-gaps branch from d4b2a17 to f591920 Compare September 29, 2025 04:11
@crisbeto
crisbeto requested a review from mmalerba September 29, 2025 07:32
@mmalerba mmalerba added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Sep 29, 2025
@angular-robot angular-robot Bot added the area: docs Related to the documentation label Sep 29, 2025
@Mr-KRAMA
Mr-KRAMA requested a review from mmalerba September 29, 2025 16:11
@mmalerba

mmalerba commented Sep 29, 2025

Copy link
Copy Markdown
Contributor

@Mr-KRAMA Can you remove the second commit? I think that failure was either a flake or an unrelated issue that can be fixed separately from this PR

@Mr-KRAMA
Mr-KRAMA force-pushed the fix/virtual-scroll-subpixel-gaps branch from 210df2c to f591920 Compare September 29, 2025 20:52
@Mr-KRAMA

Mr-KRAMA commented Sep 29, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@mmalerba Thanks for the feedback! I've removed the second commit as requested.

How should I approach the lighthouse audit failure? Should it be a separate PR or is it expected to be handled by maintainers?

@mmalerba
mmalerba merged commit 2918e28 into angular:main Sep 30, 2025
41 of 45 checks passed
@mmalerba

mmalerba commented Sep 30, 2025

Copy link
Copy Markdown
Contributor

This PR was merged into the repository. The changes were merged into the following branches:

mmalerba pushed a commit that referenced this pull request Sep 30, 2025
@Mr-KRAMA @mmalerba
fix(cdk/scrolling): prevent subpixel gaps in virtual scroll viewport (#…
a9b1afd 
…31940)

Co-authored-by: MR-KRAMA <Mr-KRAMA@users.noreply.github.com>
(cherry picked from commit 2918e28)
@Mr-KRAMA
Mr-KRAMA deleted the fix/virtual-scroll-subpixel-gaps branch October 8, 2025 03:34
@angular-automatic-lock-bot

angular-automatic-lock-bot Bot commented Nov 8, 2025

Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Nov 8, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@crisbeto crisbeto Awaiting requested review from crisbeto crisbeto was automatically assigned from angular/components-googlers
@ok7sai ok7sai Awaiting requested review from ok7sai ok7sai was automatically assigned from angular/components-googlers
@mmalerba mmalerba Awaiting requested review from mmalerba

Assignees

No one assigned

Labels

action: merge The PR is ready for merge by the caretaker area: cdk/scrolling area: docs Related to the documentation target: patch This PR is targeted for the next patch release

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

bug(cdk-virtual-scroll-viewport): renders gaps between items

2 participants

@Mr-KRAMA @mmalerba