microsoft / microsoft/vscode

Safari web: .webview-overlay-content height collapses with anchor-size(height)

Open
#332,765 2 comments 1 reaction 1 assignee Claimed by @hediet View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

### Does this issue occur when all extensions are disabled?

No

### VS Code Version

VS Code for the Web (github.dev / Codespaces web editor), observed on 2026-08-26

### OS Version

macOS (client)

### Safari Version

26.6.2 (21624.5.1.11.3)

### Repro Steps

1. Open a Codespaces/github.dev workspace in **Safari**.
2. Open an extension `WebviewView` (in this case `CS50.ddb50`).
3. Inspect host DOM element `.webview-overlay-content` wrapping the webview iframe.
4. Observe that when host style uses `height: anchor-size(height)`, the webview height collapses / renders incorrectly.
5. Manually change that wrapper style in DevTools from `height: anchor-size(height)` to `height: 100%`.
6. The webview immediately displays at correct height.

### Expected Behavior

Webview overlay wrapper should compute correct height in Safari and render webview at full intended height without manual style changes.

### Actual Behavior

In Safari, `.webview-overlay-content` sometimes collapses in height when using anchor-size based height. Replacing with `height: 100%` restores expected rendering.

### Additional Information

Observed host element (generated by VS Code web workbench, not extension code):

```html




```

When changed to:

```css
.webview-overlay-content { height: 100%; }
```

the layout is correct in Safari.

This appears to be a Safari compatibility/regression around CSS Anchor Positioning sizing in this context.

### Workarounds Tried

- Extension-side iframe/internal CSS adjustments (flex/min-height fixes) improve inner layout but do not fix host wrapper collapse.
- Browsers: Chrome displays correctly with current host styles.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.