anthropics / anthropics/claude-code

[BUG] Windows: browser/preview pane paints two copies of the same page side by side (each clipped; RTL unreadable)

Open
#81,386 0 comments 0 reactions 0 assignees View on GitHub
area:desktop
Dominant language
Python
Stars
145k
Forks
23.1k
PR merge metrics
PR metrics pending

Description

### What's Wrong?

Opening a page in the Claude browser/preview pane on Windows paints **two copies of the same page side by side** inside the pane. Each copy gets roughly half the pane width, so each one is clipped mid-word.

The duplication is not in the document and not in the tab set — it is produced by the app's rendering layer. Verified from the automation side while the duplication was visible on screen:

| checked via `mcp__Claude_Browser__*` | value |
|---|---|
| open tabs (`tabs_context`) | **1** |
| `document.querySelectorAll('body').length` | **1** |
| `document.querySelectorAll('h1').length` | **1** |
| `document.querySelectorAll('iframe').length` | **0** |
| copies visible on screen | **2** |

So a single-``, iframe-free document in a single tab is painted twice.

This is especially destructive for **RTL (Hebrew/Arabic) documents**: the clipped side is where every line *starts*, so the text is unreadable rather than merely cropped. A `dir="rtl"` page in the pane reads as garbage; the same file in an external browser is perfect.

### Two related anomalies found while narrowing this down

**1. `devicePixelRatio` differs between routes in the same pane.** Same pane, same window, same display, same `innerWidth: 302`:

| page | route | `devicePixelRatio` | raster px |
|---|---|---|---|
| `https://example.com` | http | **1.0** | 302 |
| local `.html` file | `file://` ("static snapshot") | **1.25** | 377 |

`devicePixelRatio` is a property of the window/display — two pages in one pane must report the same value. 1.25 is the machine's Windows display scaling; the http route appears to ignore it.

**2. A viewport resize cannot be undone on Windows.** After one `resize_window({width: 620})` call, the pane never returned to its real size. `resize_window({preset: 'desktop'})` reported *"Viewport reset to native size (desktop)"* but the page then measured 495, then 382, then 371 `clientWidth` across subsequent reads, while the pane itself stayed ~265 CSS px. The viewport also never settled — 11 `resize` events with the width oscillating between 342 and 382. There is no viewport control in the pane toolbar on Windows to reset it manually (see #58821), so a single agent resize call leaves the user's preview broken for the rest of the session.

On one fresh tab open, the page executed with `innerWidth: 0`, `clientWidth: 0`, `screen.width: 0` — a diagnostic page that draws a ruler tick every 10px drew **1 tick**, and the same tab reported `1280` seconds later. So the first layout pass can run against a zero-width viewport.

### What Should Happen?

The pane paints exactly one copy of the page, at the pane's real width, with a `devicePixelRatio` consistent across `file://` and `http(s)`, and a viewport that can be restored to native.

### Steps to Reproduce

1. Windows 11, display scaling 125%.
2. Save a minimal local file, e.g. `C:\tmp\repro.html`:
```html

repro

שורה בעברית שמתחילה מימין - Runtime Lean, Then Progressive Delivery



d.textContent = 'innerWidth=' + innerWidth + ' clientWidth=' +
document.documentElement.clientWidth + ' dpr=' + devicePixelRatio;

```
3. Open it in the Claude browser/preview pane (`file:///C:/tmp/repro.html`).
4. Observe two copies of the page rendered side by side in the pane, each clipped; the Hebrew heading loses its beginning.
5. Navigate the same pane to `https://example.com` and compare the reported `devicePixelRatio` — 1.0 vs 1.25 for the local file.
6. Open the same file in any external browser — it renders correctly.

### Environment

- Claude Code `2.1.217` (VS Code extensions present on disk: `anthropic.claude-code-2.1.217-win32-x64`, `anthropic.claude-code-2.1.220-win32-x64`)
- Windows 11 Home, 10.0.26200
- Display scaling 125% (`devicePixelRatio` 1.25), `screen.width` 1536
- Node v22.18.0

### Possibly related

- #28083 — preview panel renders at an incorrect viewport width, right portion clipped; a forced reflow (opening the `⋮` menu) temporarily snaps it correct. Closed as stale.
- #58821 — Windows: viewport toggle buttons missing from the Preview toolbar, so an agent-set viewport cannot be reset from the UI. Open.

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the preview-pane behavior on Windows 11 at 125% display scaling using the minimal local RTL HTML file and compare it with example.com and an external browser. Inspect the pane's rendering, devicePixelRatio, and viewport-resize behavior through the reported browser automation checks. Done means one correctly sized page is painted, RTL text is readable, devicePixelRatio is consistent across routes, and native viewport restoration works.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, vscode
Domain
desktop, frontend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.