Pinch zooming causes modal overlay to flicker

### Provide a general summary of the issue here

If you pinch zoom on a custom modal overlay with height set to `var(--visual-viewport-height)`, the viewport height causes overlay to flicker.

### 🤔 Expected Behavior?

Ideally, the viewport height should be frozen when pinch zooming.

### 😯 Current Behavior

Viewport height is calculated on pinch zoom.

### 💁 Possible Solution

_No response_

### 🔦 Context

https://github.com/user-attachments/assets/8808cd08-3aae-4765-ac42-c3d9acd40a98

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/vitejs-vite-d3twgf?file=src%2FApp.tsx

### Version

^1.4.0

### What browsers are you seeing the problem on?

Chrome
Safari
Firefox

### If other, please specify.

_No response_

### What operating system are you using?

macOS Sequoia 15

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Start with the linked StackBlitz reproduction at src/App.tsx and reproduce the modal overlay flicker while pinch zooming in Chrome, Safari, and Firefox. Trace how the custom overlay uses var(--visual-viewport-height) and how viewport height changes during zoom. Done means the viewport height remains stable during pinch zoom and the overlay no longer flickers.

Written by the indexing model from the issue text.