Skip to content

[Toolkit][Shadcn] Round the position of the navigation-menu panel to a whole pixel - #4096

Open
Enz000 wants to merge 1 commit into
symfony:3.xfrom
Enz000:fix-toolkit-navigation-menu-screenshots
Open

Enz000 wants to merge 1 commit into
symfony:3.xfrom
Enz000:fix-toolkit-navigation-menu-screenshots

Conversation

@Enz000

@Enz000 Enz000 commented Oct 14, 2026

Copy link
Copy Markdown
Contributor
Q A
Bug fix? yes
New feature? no
Deprecations? no
Documentation? no
Issues
License MIT

Since the update to Playwright 1.64, the "opens on hover" and "still opens after being moved in the DOM" screenshots of navigation-menu fail about one run in two. This breaks the browser (8/8) job, on 3.x and on every pull request.

The panel is anchored to the inline-start of its trigger. In the default example, the menu is centered and has a fractional width, so the panel starts at x = 204.156. Text placed on a fractional pixel is not rasterized the same way every time: two renderings alternate, and they differ on the antialiasing of the item titles. The panel of the "Resources" item lands on x = 284, a whole pixel, and its screenshot never fails.

The controller now snaps the edge of the panel to a device pixel, as Floating UI does by default. In the RTL example, the right edge moves from 451.984 to 452.

Checks run:

  • A new test checks that the edge of the open panel lies on a whole pixel, in the default and RTL examples. It fails without the change (204.15625 and 451.984375).
  • Before the change, the four flaky screenshot tests passed 19 times out of 40. After it, the eight screenshot tests that open the menu pass 80 times out of 80.
  • The full spec of the recipe passes (24 tests). Three screenshots are updated, by about 0.16 px.
  • oxfmt and oxlint are clean.

@Enz000
Enz000 requested a review from Kocal as a code owner October 14, 2026 10:08
@carsonbot carsonbot added Status: Needs Review Needs to be reviewed Bug Bug Fix Toolkit labels Oct 14, 2026
@Enz000
Enz000 force-pushed the fix-toolkit-navigation-menu-screenshots branch from 486dd8f to 04e2839 Compare October 14, 2026 10:13
@Enz000 Enz000 changed the title [Toolkit][Shadcn] Snap the navigation-menu panel to a device pixel [Toolkit][Shadcn] Round the position of the navigation-menu panel to a whole pixel Oct 14, 2026
@Enz000

Enz000 commented Oct 14, 2026

Copy link
Copy Markdown
Contributor Author

"Unit Tests / php (dev, 8.5) (pull_request)" fail also, here's the fix #4095

…a whole pixel

| Q              | A
| -------------- | ---
| Bug fix?       | yes
| New feature?   | no
| Deprecations?  | no
| Documentation? | no
| Issues         |
| License        | MIT

Since the update to Playwright 1.64, the "opens on hover" and "still opens after being moved in the DOM" screenshots of `navigation-menu` fail about one run in two. This breaks the `browser (8/8)` job, on 3.x and on every pull request.

The panel is anchored to the inline-start of its trigger. In the default example, the menu is centered and has a fractional width, so the panel starts at x = 204.156. Text placed on a fractional pixel is not rasterized the same way every time: two renderings alternate, and they differ on the antialiasing of the item titles. The panel of the "Resources" item lands on x = 284, a whole pixel, and its screenshot never fails.

The controller now rounds the edge of the panel to a whole pixel. In the RTL example, the right edge moves from 451.984 to 452. On a screen with a whole device pixel ratio, such as 2, a whole CSS pixel is also a whole device pixel. Rounding to the device pixel itself would need `window.devicePixelRatio`, which is not Baseline Widely available.

Checks run:

- A new test checks that the edge of the open panel lies on a whole pixel, in the default and RTL examples. It fails without the change (204.15625 and 451.984375).
- Before the change, the four flaky screenshot tests passed 19 times out of 40. After it, the eight screenshot tests that open the menu pass 80 times out of 80.
- The full spec of the recipe passes (24 tests). Three screenshots are updated, by about 0.16 px.
- `oxfmt`, `oxlint` and `lint:baseline` are clean.
@Enz000
Enz000 force-pushed the fix-toolkit-navigation-menu-screenshots branch from 04e2839 to 07fe07c Compare October 15, 2026 09:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Bug Bug Fix Status: Needs Review Needs to be reviewed Toolkit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants