Fix/2817 [tag-list] fix flickering of elements inside when zooming#3112
Fix/2817 [tag-list] fix flickering of elements inside when zooming#3112michal-sanoma wants to merge 39 commits intomainfrom
Conversation
michal-sanoma
requested review from
Diaan,
a11ymiko,
anna-lach and
jpzwarte
as code owners
🦋 Changeset detectedLatest commit: 856ee89 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR 💥 An error occurred when fetching the changed packages and changesets in this PR |
🕸 Website previewYou can view a preview here (commit |
There was a problem hiding this comment.
Pull request overview
Adjusts sl-tag-list overflow/stack visibility logic to avoid flickering (“layout oscillation”) caused by sub-pixel rounding at certain browser zoom levels.
Changes:
- Added a 0.5px buffer to the tag visibility calculation threshold to prevent oscillation.
- Added tests covering the buffer threshold behavior.
- Added a changeset for a patch release of
@sl-design-system/tag.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/components/tag/src/tag-list.ts | Adds a sub-pixel buffer to the overflow detection condition to reduce flicker at certain zoom levels. |
| packages/components/tag/src/tag-list-buffer.spec.ts | Adds new spec cases validating behavior on either side of the 0.5px threshold. |
| .changeset/better-eels-hang.md | Documents the patch change for release notes/versioning. |
You can also share your feedback on Copilot code review. Take the survey.
🕸 Storybook previewYou can view a preview here (commit |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR addresses flickering in sl-tag-list at certain browser zoom levels by stabilizing the “collapse to stack” visibility calculation in the TagList component.
Changes:
- Add a small (0.5px) sub-pixel buffer to the TagList width comparison to prevent layout oscillation.
- Add a new spec covering the buffer threshold behavior.
- Add a changeset for a patch release of
@sl-design-system/tag.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/components/tag/src/tag-list.ts | Adds a SUBPIXEL_BUFFER_PX buffer to the “not enough space” check to reduce zoom-related oscillation. |
| packages/components/tag/src/tag-list-buffer.spec.ts | Introduces tests for the new sub-pixel buffer threshold behavior. |
| .changeset/better-eels-hang.md | Declares a patch changeset describing the flicker fix. |
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Fixes visual flickering/oscillation in sl-tag-list at certain zoom levels and stabilizes sl-combobox multiple-selection tag layout to prevent overlap/click issues.
Changes:
- Add a small sub-pixel buffer to
sl-tag-listwidth calculations to avoid layout oscillation. - Stabilize
sl-comboboxtag list sizing/stacking via CSS adjustments. - Add/update unit tests and changesets covering the new behavior.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/tag/src/tag-list.ts | Adds a 0.5px buffer to the overflow threshold to reduce zoom-level flicker. |
| packages/components/tag/src/tag-list.spec.ts | Adds tests intended to verify sub-pixel-buffer behavior. |
| packages/components/combobox/src/combobox.spec.ts | Adds tests to guard against tag-list flicker and updates stacking expectations. |
| packages/components/combobox/src/combobox.scss | Adjusts tag-list flex sizing + stacking context to prevent overlap and layout instability. |
| .changeset/lazy-dodos-hide.md | Combobox patch note for overlap + flicker fixes. |
| .changeset/better-eels-hang.md | Tag patch note for sub-pixel buffer behavior. |
You can also share your feedback on Copilot code review. Take the survey.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR reduces flickering/oscillation in stacked sl-tag-list (notably when zooming) and stabilizes sl-combobox multiple-selection tag layout so tags remain clickable and layout doesn’t jitter.
Changes:
- Add a 0.5px sub-pixel buffer to
sl-tag-listwidth comparison to prevent visibility toggling at certain zoom levels. - Stabilize
sl-comboboxtag list layout via CSS (flex,min-inline-size,position,z-index) and adjust expectations accordingly. - Add/extend tests and ship patch changesets for
@sl-design-system/tagand@sl-design-system/combobox.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/tag/src/tag-list.ts | Adds a sub-pixel buffer to visibility threshold to prevent oscillation. |
| packages/components/tag/src/tag-list.spec.ts | Adds tests covering the buffer behavior by stubbing widths. |
| packages/components/combobox/src/combobox.spec.ts | Adds layout stability + anti-flicker tests; updates stacking expectations. |
| packages/components/combobox/src/combobox.scss | Stabilizes tag list layout and stacking/clickability via flex sizing + z-index. |
| .changeset/lazy-dodos-hide.md | Patch note for combobox (clickability + flicker). |
| .changeset/better-eels-hang.md | Patch note for tag-list buffer fix. |
You can also share your feedback on Copilot code review. Take the survey.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Fixes layout flickering/oscillation for sl-tag-list (notably at certain zoom levels) and stabilizes sl-combobox multi-select tag layout so tags and remove icons behave consistently.
Changes:
- Add a small (0.5px) buffer to
sl-tag-listoverflow detection to prevent sub-pixel rounding oscillations. - Stabilize
sl-comboboxtag list layout via CSS (flex,min-inline-size, stacking context) and adjust related expectations. - Add/extend tests to cover the sub-pixel buffer behavior and combobox tag list stability.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/tag/src/tag-list.ts | Adds sub-pixel width buffer to visibility calculation to prevent oscillation. |
| packages/components/tag/src/tag-list.spec.ts | Adds tests for the sub-pixel buffer behavior. |
| packages/components/combobox/src/combobox.spec.ts | Adds stability/flicker regression tests and updates stacking expectations. |
| packages/components/combobox/src/combobox.scss | Adjusts sl-tag-list layout/styling inside combobox to prevent overlap/flicker. |
| .changeset/lazy-dodos-hide.md | Patch changeset for combobox fixes (clickability + layout stability). |
| .changeset/better-eels-hang.md | Patch changeset for tag-list sub-pixel buffer fix. |
You can also share your feedback on Copilot code review. Take the survey.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
BEFORE
before.mov
AFTER
after.mov