Hide post embed iframes with visibility:hidden instead of clipping

[westonruter]

Summary

Fixes #1114

Relevant technical choices

When a lazy-loaded iframe is styled with clip: rect(1px, 1px, 1px, 1px), it seems Chrome does not reliably load it. Interestingly, the iframe loads when navigating to the page from another page, but it does not load when doing an iframe.

If the clip is replaced with visibility:hidden (or other options per #1192 (comment)) then it does load reliably. This also fixes an accessibility problem whereby if a post embed iframe does not get displayed (such as due to JavaScript being disabled), when the iframe is hidden with clip then the user can still tab through links in the iframe which is confusing since the links are not shown (for sighted users); when visibility:hidden is used, then content is skipped from being navigated until it is made visible.

Before

Screen.recording.2024-04-30.12.22.47.webm

After

Screen.recording.2024-04-30.12.23.41.webm

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: adamsilverstein <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[swissspidy]

As per my comment on the issue, this also needs to be tested with an iframe containing an image (post thumbnail) to ensure that is loading as expected too.

[westonruter]

@swissspidy oh, got it. Here's a test page: https://retractable-crane-47a33d.instawp.xyz/pascal-birchler-on-democratizing-performance/

✅ Behavior in Chrome 123 on ChromeOS:

Screen.recording.2024-05-01.14.44.11.webm

[westonruter]

✅ Behavior in Safari 17.4.1 on macOS 14.4.1:

Screen.Recording.2024-05-01.at.14.48.42.mov

[westonruter]

✅ Behavior in Firefox 124.0.2 on macOS 14.4.1:

Screen.Recording.2024-05-01.at.14.53.45.mov

[westonruter]

Actually, I can't confirm whether Local Overrides were working correctly when I did that test in #1192 (comment). So I've copied the post content and put it on a test site: https://retractable-crane-47a33d.instawp.xyz/wordpress-6-4-field-guide/

Trace before	Trace after

LCP is reduced from 438.5 ms to 411.9 ms so a 6% improvement, at least for this single run.

[westonruter]

I've opened WordPress/wordpress-develop#6474 to apply this patch to core as well: https://core.trac.wordpress.org/ticket/58773#comment:26

[adamsilverstein]

Great!

[westonruter]

After discussing with @joedolson, he also suggested visibility:hidden as an alternative. I assumed this would be even more likely for browsers to consider hidden and avoid lazy-loading, but in fact Chrome, Safari, and Firefox all load such iframes. The other alternative which I've tested that works is to add a width and height of zero. Test cases: https://codepen.io/westonruter/pen/rNbXPgq?editors=1111

It seems going with visibility:hidden is a simpler approach than opacity:0; pointer-events:none. Also, it seems better than setting a zero width/height because then you have to worry about setting a zero border potentially. Also, since there is no need for screen readers to have access to the iframe prior to it being loaded (as regular visitors have no access to such an iframe either), I think it is preferable to go with visibility:hidden.

Finally, I just discovered that visibility:hidden seems to also be an accessibility fix here because if a post embed iframe fails to be shown, such as when JavaScript is turned off, tabbing through a document with a post iframe hidden with clip (or with opacity) will result in a few tab stops occurring inside the hidden iframe which is confusing to sighted users navigating with the keyboard. If the iframe has visibility:hidden then no tab stops occur in the iframe.