WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#35657 closed defect (bug) (fixed)

Image height calculation not always available on body.load

Reported by: jipmoors Owned by: ocean90
Milestone: 4.6 Priority: normal
Severity: normal Version: 4.4
Component: Embeds Keywords: has-patch
Focuses: javascript Cc:

Description

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)

Attachments (7)

parent.html (4.9 KB) - added by jipmoors 5 years ago.
iframe loader
embed-problematic.html (19.7 KB) - added by jipmoors 5 years ago.
the iframe that not always gets resized properly
embed-no-auto-height.html (19.6 KB) - added by jipmoors 5 years ago.
without the height:auto, iframe height set properly
35657-poc.diff (2.4 KB) - added by peterwilsoncc 5 years ago.
Proof of concept
35657.diff (663 bytes) - added by swissspidy 4 years ago.
35657.2.diff (674 bytes) - added by swissspidy 4 years ago.
Adjusted comment in the JavaScript
35657.3.diff (1.2 KB) - added by swissspidy 4 years ago.

Download all attachments as: .zip

Change History (18)

@jipmoors
5 years ago

iframe loader

@jipmoors
5 years ago

the iframe that not always gets resized properly

@jipmoors
5 years ago

without the height:auto, iframe height set properly

#1 @swissspidy
5 years ago

  • Focuses javascript removed
  • Keywords needs-patch needs-testing added
  • Milestone changed from Awaiting Review to 4.6

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.

#2 @jipmoors
5 years ago

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
5 years ago

Proof of concept

#3 @peterwilsoncc
5 years ago

  • Keywords has-patch added; needs-patch removed

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
4 years ago

#4 @swissspidy
4 years ago

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
4 years ago

Adjusted comment in the JavaScript

#5 @swissspidy
4 years ago

  • Keywords commit added; needs-testing removed
  • Milestone changed from 4.6 to 4.5.3
  • Owner set to swissspidy
  • Status changed from new to assigned

#6 @swissspidy
4 years ago

  • Milestone changed from 4.5.3 to 4.6

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.

#7 @swissspidy
4 years ago

  • Version changed from 4.4.1 to 4.4

#8 @swissspidy
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#9 @ocean90
4 years ago

  • Focuses javascript added
  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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
4 years ago

#10 @swissspidy
4 years ago

  • Keywords has-patch added; needs-patch removed
  • Owner changed from swissspidy to ocean90
  • Status changed from reopened to reviewing

35657.3.diff adds such a check.

#11 @ocean90
4 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 37977:

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

Props swissspidy.
Fixes #35657.

Note: See TracTickets for help on using tickets.