Embed Optimizer breaks loading of Post Embeds

[westonruter]

Bug Description

When the Embed Optimizer plugin is active, it adds loading=lazy to a Post Embed iframe. Apparently because WordPress styles the initial iframe as pseudo-hidden with clip: rect(1px, 1px, 1px, 1px), Chrome (at least) is interpreting this to mean that the iframe is hidden and thus shouldn't be loaded yet. However, since the iframe never loads, the JS inside the iframe never fires and doesn't communicate with the parent window to show the iframe.

Steps to reproduce

1. Enable Embed Optimizer
2. Add a Post Embed
3. View the post with the embed on the frontend

Screenshots

[adamsilverstein]

Ah, good catch. Previously we had excluded lazy loading these iframes in the plugin (based on the presence of the data-secret attribute), that functionality appears to have been lost somewhere along the way.

[westonruter]

I wonder if there is a better way to "hide" the post embed iframe before it is loaded that doesn't cause Chrome to consider it as hidden to prevent it from being loaded.

[swissspidy]

For context, we used display:none; originally, but had to change to use clip because of an a11y issue in Firefox, where assets inside the iframe weren't being displayed because they have no computed style.

See https://core.trac.wordpress.org/ticket/35894#comment:12, https://bugzilla.mozilla.org/show_bug.cgi?id=548397

It sounds like this got fixed later on in Firefox, but needs testing. You'd want the iframe to load in a way that it doesn't cause a11y issues.

[westonruter]

@swissspidy Thanks for that context. For this issue here, I would guess that using display:none would probably be even worse at loading than the current clip if the iframe has loading=lazy. Interestingly, I just tried and clip and display:none behave the same: if navigating to the page from another page, the lazy iframe seems to load, but it does not load if I do a page reload, puzzlingly. Nevertheless, if I use another approach of opacity:0 and pointer-events:none then it does load consistently in both cases. I've opened #1192 to implement this. I assume that this approach wasn't feasible before for post embeds since pointer-events:none isn't supported in IE<11.