Components with heigh in VH can cause the preview iFrame to expand infinitely in height

Created on 11 April 2025, 18 days ago

Overview

As an example the SDC component experience_builder/tests/modules/xb_test_sdc/components/props-slots/props-slots.twig has a height of 100vh specified.

The preview iFrame's height is matched to the height of the content. The use of VH means that component will try and be the height of the iFrame. The combo of these two things leads to an infinite loop of the iFrame expanding to contain the component and then the component expanding to match the height of the iFrame.

Proposed resolution

There is already a half-solution in place to catch this but it's not working. ui/src/hooks/useSyncIframeHeightToContent.ts:64

  1. The code has a bug that checks element instanceof HTMLElement which is a) unnecessary and also b) not truthy which skips the actual vh check
  2. The check for vh will only work for inline styles. element.style.height does not return a value if the height is specified in a separate stylesheet.

    So as a first step, removing the element instanceof HTMLElement from the if statement will get this partially working.

    User interface changes

šŸ› Bug report
Status

Active

Version

0.0

Component

Page builder

Created by

šŸ‡¬šŸ‡§United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024