Fix Blurry Text, Wrong Zoom, or Cut-Off UI (Run the Screen Test)

Confirm your viewport and pixel ratio first

Open the Screen Test. It shows your live Viewport (CSS pixels) and Device Pixel Ratio (DPR). If a site looks clipped or blurry, keep this tab open while you troubleshoot and re-check it after each change.

Common symptoms:

• Text looks fuzzy compared to other apps
• The page is stuck zoomed in or zoomed out
• Buttons or dialogs are cut off at the bottom
• The layout looks like a mobile view on a laptop
• Images look soft even on a sharp display

Fix 1: Reset browser zoom to 100%

Zoom is the fastest cause to eliminate.

• Chrome / Edge / Firefox (Windows/Linux): press Ctrl+0 (zero)
• Chrome / Edge / Firefox (macOS): press Cmd+0
• Safari (macOS): View > Actual Size (or Cmd+0)

Also check the browser menu while the problem site is open:

• Chrome/Edge: Menu (⋮/⋯) > Zoom and set it to 100%
• Firefox: Menu > Zoom and reset

After resetting, reload the site and re-check the Screen Test.

Fix 2: Confirm the default zoom setting is not forcing scale

If every site looks too large or too small, the browser’s default zoom can be the cause.

• Chrome: Settings > Appearance > Page zoom → set to 100%
• Edge: Settings > Appearance > Zoom → set to 100%
• Firefox: Settings > General > Language and Appearance → check Zoom (and reset if changed)

Then close the browser and reopen it. Retest the site.

Fix 3: Fix OS display scaling (Windows and Linux are common)

Display scaling changes how many CSS pixels fit on the screen. Fractional scaling can also soften text on some setups.

Windows 10/11:

1. Go to Settings > System > Display
2. Under Scale, choose the Recommended value
3. If you use custom scaling, turn it off and sign out once, then sign back in

macOS:

1. Go to System Settings > Displays
2. Pick a scaled resolution labeled as default for your display
3. If text looks soft on an external monitor, try a different scaling option and retest

Linux (GNOME/KDE):

• Check display scaling in your system settings. If you are on fractional scaling, try 100% or 200% as a test and retest in the browser.

After changing OS scaling, revisit the Screen Test. Viewport and DPR values will often change.

Fix 4: Improve text rendering (ClearType and font smoothing)

If zoom and scaling look correct but text is still blurry, tune the OS text renderer.

• Windows: search for Adjust ClearType text and run the wizard.
• External monitors: confirm the monitor is running at its native resolution and refresh rate.

Then reload the browser and compare text again.

Fix 5: Disable extensions that modify fonts, zoom, or dark mode

Extensions can apply CSS overrides across every site.

• Disable dark mode injectors, font replacers, and accessibility zoom tools.
• Test in an Incognito/InPrivate window with extensions disabled.
• If the issue disappears, add a site allowlist rule or remove the conflicting extension.

Fix 6: Toggle hardware acceleration if rendering looks glitchy

GPU compositing affects text and UI layers on some machines.

• Chrome/Edge: Settings > System and performance > Use hardware acceleration when available
• Restart the browser after toggling.

If disabling acceleration makes text sharper but scrolling becomes choppy, update your GPU driver and turn acceleration back on. Then retest.

Fix 7: Watch for remote desktop scaling

Remote desktop tools can apply their own scaling and compression.

• Compare the Screen Test values locally vs. inside the remote session.
• In the remote client, disable "smart sizing" or force 1:1 scaling as a test.

If the page only looks blurry in the remote session, the remote layer is the bottleneck, not the browser.

Verify the fix

Return to the Screen Test and confirm:

• Viewport matches what you expect for your window size
• DPR is stable between reloads

Then reload the problem site. If the layout is still broken, run the CSS Test next; missing layout features can also cause clipped UI that looks like a zoom problem.