White border on nav at certain zoom levels in Chrome

[marktnoonan]

Current behavior

In Chrome at 125% and 175% zoom a distracting white border appears on the left nav when on the Test Runner page:

This is caused by an apparent bug in Chrome as it happens in no other browser. At these zoom levels, Chrome seems to make too much space for the 1px border.

Desired behavior

The border should be the usual dark gray at all zoom levels.

Test code to reproduce

Just change zoom levels with Cmd + +/- on the spec runner page (where it is noticeable).

The issue seems to be related to the use of grid-template-columns: auto and can be "fixed" by hardcoding a value greater than the true nav sidebar value for that part of the grid. It can also be fixed by moving the border to the right of the nav bar instead, which has the same visual appearance but doesn't show the bug.

Cypress Version

10.0.0-12.2.0

Node version

na

Operating System

macOs

Debug Logs

No response

Other

No response

[cypress-bot]

The code for this is done in cypress-io/cypress#25285, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 12.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.3.0, please open a new issue.