Safari web: .webview-overlay-content height collapses with anchor-size(height)
- 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
Assessment
This issue has not been assessed yet.