WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#27051 closed defect (bug) (fixed)

Twenty Fourteen: Trigger Masonry after document load

Reported by: sixhours Owned by: lancewillett
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.8.1
Component: Bundled Theme Keywords: has-patch
Focuses: javascript Cc:

Description

This may fix an issue with widgets (like the Facebook or Twitter Timeline widgets) that load iframes and break out of the footer widget container due to Masonry firing before they've loaded. I'm not sure it's the best solution, however, and needs further testing.

Attachments (3)

twentyfourteenfunctions.diff (1020 bytes) - added by sixhours 7 years ago.
27051.diff (1.2 KB) - added by obenland 7 years ago.
27051.2.diff (1.8 KB) - added by lancewillett 7 years ago.
Bump the JS version also, and spacing fix

Download all attachments as: .zip

Change History (16)

This ticket was mentioned in IRC in #wordpress-themes by lancewillett. View the logs.


7 years ago

#2 @obenland
7 years ago

Nice catch Caroline! Have tested if it work if we moved the masonry call in the _window.load callback?

#3 @sixhours
7 years ago

I did test it in that callback first, but it did not work for me.

#4 @lancewillett
7 years ago

  • Milestone changed from Awaiting Review to 3.9

This ticket was mentioned in IRC in #wordpress-themes by lancewillett. View the logs.


7 years ago

#6 @sixhours
7 years ago

Steps to reproduce:

  • Activate Twenty Fourteen
  • Add a widget with an iframe and a height that's taller than the footer (I used the Twitter Timeline widget with a height of 800px) to the Footer Widget Area.
  • Check the site, and note the widget breaks out of the footer container, like so: https://cloudup.com/c2nNB5uk3xQ
  • Happens for me in the latest versions of Chrome, Safari, and Firefox for Mac

@obenland
7 years ago

#7 @obenland
7 years ago

  • Keywords has-patch added

27051.diff fixes the outlined example for me.

#8 @lancewillett
7 years ago

  • Keywords needs-testing added

Hmm, patch doesn't resolve the issue for me. When viewing a new page (after hard refresh and bumping the JS version) the widget still overlaps the footer.

#9 @lancewillett
7 years ago

With the example of Twitter Timeline widget, even if the Masonry JS loads after the body loads -- the widget content itself loads asynchronously so Masonry would need to re-load after any third-party scripts finish. Which sounds complicated to solve.

@lancewillett
7 years ago

Bump the JS version also, and spacing fix

This ticket was mentioned in IRC in #wordpress-themes by lancewillett. View the logs.


7 years ago

#12 @lancewillett
7 years ago

  • Keywords needs-testing removed

Chatting about this in IRC today, best course seems to go ahead with the onload delay to give more time for things to load before Masonry kicks in. But, we can't account for all the myriad widgets out there that load asynchronously without a set height.

#13 @lancewillett
7 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 27627:

Twenty Fourteen: load Masonry after window load event to give more time for widget content to load before drawing the layout. Closes #27051.

Note: See TracTickets for help on using tickets.