[wp-trac] [WordPress Trac] #52768: WordPress post URL oEmbed rendering blocked by iframe lazy-loading

[WordPress Trac]

#52768: WordPress post URL oEmbed rendering blocked by iframe lazy-loading
---------------------------+--------------------------
 Reporter:  SirStuey       |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  5.7.1
Component:  Embeds         |     Version:  5.7
 Severity:  normal         |  Resolution:
 Keywords:  needs-testing  |     Focuses:  performance
---------------------------+--------------------------

Comment (by flixos90):

 @SirStuey @peterwilsoncc I debugged this for a while, but haven't been
 able to come to a proper conclusion on why exactly this is happening. Here
 are some of my observations:

 * When I visit https://make.wordpress.org/core/2021/02/23/wordpress-5-7
 -field-guide/ on Chrome and Mac OS (Catalina), I see the embeds working as
 expected. So the particular URL used as example here works for me, so even
 this seems to be more specific than a certain browser on a certain OS.
 * When I embed a WordPress post on one of my test sites, I ''can''
 replicate the error **with the same browser and OS**, so I'm not sure why
 it's failing in one place and not the other.
 * It looks like for whatever reason in certain situations the iframe is
 not loaded by the browser because it is visually hidden by default (using
 `position: absolute; clip: rect(1px, 1px, 1px, 1px);`); that makes sense
 to me because it thinks that "this iframe isn't visible, so it doesn't
 need to be loaded" (without `loading="lazy"` the iframe of course gets
 loaded regardless of visibility since all iframes would load immediately).
 * Because the iframe isn't loaded, it doesn't fire the `height`
 postMessage event (see `wp-embed-template.js`) which is why the iframe
 isn't made visible while hiding the fallback link (see `wp-embed.js`).
 * My biggest confusion is the question what situation exactly causes this
 here (which browser, maybe which browser version? which OS? something
 else? etc).

 Potentially to fix this in 5.7.1 we should simply not add the `loading`
 attribute to WordPress embed iframes. We could do that by simply returning
 early in `wp_iframe_tag_add_loading_attr()` if the current iframe is for a
 WordPress embed (e.g. check existence of `wp-embedded-content` class). We
 could then further investigate this problem and potentially fix it
 ''really'' in a follow-up issue.

 What do you think?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52768#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform