useSyncIframeHeightToContent: vh-height sections with background images cause unbounded iframe growth via feedback loop
**Summary**
When a code component renders a section with a Tailwind arbitrary-value vh class (e.g. `h-[60vh]`) containing an absolutely-positioned background image, the Canvas editor preview iframe grows unboundedly instead of being capped at the correct viewport-relative height.
**Steps to reproduce**
1. Create a code component with this structure:
```
const sizeClass = { default: 'h-[60vh]', short: 'h-[40vh]' };
export default function VhImageHero({ size = 'default' }) {
const heightClass = sizeClass[size] || sizeClass.default;
return (
<section
className={`relative flex w-full items-center justify-center overflow-hidden ${heightClass}`}
>
<div className="absolute inset-0">
<img
src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=1920&q=80"
alt="Hero background"
className="h-full w-full object-cover"
/>
</div>
</section>
);
}
```
2. Add the component to a Canvas page in the editor.
3. The background image takes up a disproportionate amount of vertical space.
issue