Issue Summary

Code search highlights are visually misaligned when using multi‑monitor setups with mixed DPI / display scaling and non‑default browser zoom.

Steps to Reproduce

Environment

• Product: Bitbucket Cloud (web UI – code search / file view)

• Browser: Microsoft Edge 145.0.3800.82

• OS: Windows 11 Pro 26200.7922

• Hardware:

• • Triple‑monitor setup

• • Different scaling (DPI) configured per display

• • Laptop + external monitors

• Display factors involved:

• • Which monitor the browser window is on

• • Windows display scaling for each monitor (e.g. 100%, 125%, 150%)

• • Browser zoom level (e.g. 90%, 110%)

1. On Windows 11, configure a multi‑monitor setup with different scaling on at least one external monitor (e.g. laptop screen at 150%, external monitor at 100%).

1. Open Microsoft Edge and navigate to a Bitbucket Cloud repository.

1. Use code search (or in‑file search) to find a term that appears multiple times in a file.

1. Ensure the browser window is on the monitor with non‑default scaling, and optionally adjust browser zoom away from 100%.

1. Observe how the highlighted matches are rendered in the file view.

Expected Results

Highlighted search matches should precisely align with the corresponding text content, independent of:

• • Which monitor the browser is on,

• • OS‑level DPI / scaling configuration,

• • Browser zoom (within normal ranges).

Actual Results

• The yellow/colored highlight regions for matches appear offset from the underlying text.

• In some cases the highlighted area is shifted horizontally, so:

• • The highlight appears slightly to the left/right of the actual characters, or

• • It partially covers adjacent text rather than the matched term.

• The behavior appears to change depending on:

• • Which monitor displays the browser window,

• • The Windows display scaling (DPI) for that monitor,

• • The browser zoom setting.

• When moving the same browser window between monitors with different scaling, the highlight alignment can change without reloading the page.

Workaround

1. Use a single‑monitor / uniform‑DPI setup while searching

• • Temporarily work on one monitor only, with Windows display scaling set the same on all active displays (e.g. all at 100%).

• • Or disconnect additional monitors and use the laptop screen only while doing code search.

1. Reset browser zoom to 100% on the affected page

• • In Edge (and other browsers):

• • • Press Ctrl + 0 to reset zoom to 100%.

• • • Or use the browser menu → Zoom → 100%.

• • Reload the Bitbucket tab after changing zoom and check highlight alignment again.

1. Keep the browser window on the “main” monitor

• • Pick one monitor (ideally the one with 100% scaling) and:

• • • Move the Edge window there.

• • • Close and reopen the tab on that monitor.

• • Avoid dragging the active Bitbucket window between monitors while using code search.

1. If possible, standardize scaling on the primary monitor used for Bitbucket

• • In Windows: Settings → System → Display → Scale & layout

• • Set the monitor you use for Bitbucket to 100% (or at least the same scaling as when the highlights look correct).

• • Sign out / in or reboot if Windows prompts for it to apply scaling changes cleanly.

1. Try an alternate browser once (sanity check / temporary workaround)

• • Test the same repo/search in Chrome or Firefox on the same monitor, with:

• • • Browser zoom at 100%, and

• • • The window not moved between monitors.

• • If one browser is less affected, they can temporarily use that one for heavy code search sessions.