Image height calculation not always available on body.load

[jipmoors]

Situation:
Embedding another page from the same blog inline.
The embedded page has a featured image with the default aspects:
<img width="600" height="314" src="a-600x314.png" class="attachment-large size-large" alt="Google penguin penalizes bad links" srcset="b-250x131.png 250w, a-600x314.png 600w, c.png 1200w" sizes="(max-width: 600px) 100vw, 600px" />

Issue:
When loading the page the iFrame doesn't always get resized to desired height properly (about 50% of the time).

Problem:
Because of the dynamic "height:auto" css property the browser has not always calculated the height the image will be displayed at when the 'body.ready' event is triggered. Though sometimes it is.
.wp-embed-featured-image img{width:100%;height:auto;border:none}
This is a style set by 'wp-embed-template.min.css'.

When loading the image locally everything works fine but when using our test image of 400kb on an AWS server it is problematic most of the time.

See attached files for reproducing the problem.

Tested browsers:
OSX 10.11.2: Chrome Version 47.0.2526.111 (64-bit)
OSX 10.11.2: Safari 9.0.2
Windows 10: Chrome Version 48.0.2564.97 m

It looks like it does not affect Internet Explorer 11 (11.0.26)

[jipmoors]

iframe loader

[jipmoors]

the iframe that not always gets resized properly

[jipmoors]

without the height:auto, iframe height set properly

[swissspidy]

Seems like removing the height: auto part would resolve the issue, though I'm not sure if it'll introduce other bugs, e.g. with rounding errors when resizing the image.

[jipmoors]

Just confirmed that removing 'height: auto' does screw up the aspect ratio.
Will test with 'inherit' but I'm afraid we might be looking at JavaScript for a more global solution.

[peterwilsoncc]

Proof of concept

[peterwilsoncc]

Attached a proof of concept using intrinsic ratios.

I don't think it's commit ready, if it's a suitable path to take then it could do with a little drying out for starters. Be great if I could get your thoughts @swissspidy.

For testing, throttling to GPRS in dev tools will reproduce the problem most of the time.

[swissspidy]

While the proof-of-concept is very clever, I haven't seen this method being used for images. It also makes me aware of how ugly the aspect ratio handling is, which should probably be moved into a separate function if we go down that road.

However, even though I like how the patch solves this without JavaScript, I think we could fix it even easier, see 35657.diff​

[swissspidy]

Adjusted comment in the JavaScript

[swissspidy]

Actually, it's not that big of a deal that it needs to be in 4.5.3. Will commit to trunk only for now.

[swissspidy]

In 37745:

Embeds: Improve height calculation for slow loading images.

When the featured image takes longer to load, the browser might not know its exact dimensions yet and therefore sends an incorrect document height to the embedding site.

By sending the document's height again after the featured image has been loaded, we ensure that the iframe doesn't get cut off.

Fixes #35657.

[ocean90]

Before adding the event listener we have to check whether the query was successful. Otherwise it will produce an JS error:

Uncaught TypeError: Cannot read property 'addEventListener' of null

[swissspidy]

35657.3.diff​ adds such a check.

[ocean90]

In 37977:

Embeds: After [37745], check if a featured image exists before attaching an event listener.

Props swissspidy.
Fixes #35657.