Text widget renders large empty space

[draganescu]

When upgrading from a site that used text widgets, sometimes these text widgets render a preview containing a large empty space. In TwentyTwenty the space is in all widget areas, in other themes, the space is only in the inactive widgets area.

To reproduce

1. Use the latest WordPress 5.8 RC
2. Install the Classic Widgets plugin
3. Activate the Classic Widgets plugin
4. Go to Appearance > Widgets
5. Add a text widget and put content in it
6. Deactivate the Classic Widgets plugin
7. Go to Appearance > Widgets
8. Observe the text widget
9. If it renders correctly try moving it into another widget area, then refreshing the page

Screenshots

text-widget-space.mp4

Expected behavior

The text widget to render only its contents.

[noisysocks]

What theme are you using? Doesn't seem to happen in TT1.

[draganescu]

In TwentyTwenty for instance.

[adamziel]

I can't reproduce on either Chrome or Firefox using either TwentyTwenty or TT1. I know @kevin940726 couldn't reproduce this one either.

[noisysocks]

Let's reopen if we figure out how to reproduce it reliably 🙂

[draganescu]

I can consistently reproduce this in Safari, using the steps in the description, TwentyTwewntyOne theme, and the standard text widget, using WordPress 5.8 branch and no Gutenberg plugin.

[noisysocks]

Aha, Safari! Added to Needs dev. If the fix is non-trivial we should punt this to 5.8.1 as it is late in the release cycle.

[kevin940726]

This seems to be related to the PR #32260 I'm working on, and I also forgot to test it in Safari 😅. I'll take a look.

[kevin940726]

I just pushed a commit to #32260 hopefully will fix this issue.

The issue seems to be that Safari for some reasons will grow an iframe to an unusual height if it's loaded when hidden (inside collapsed widget area). The solution is to only set the height once it's loaded. It works in my case, but I'm not sure if it solves all the issues here, so please help test it ;).