search

chrisblakley / Nebula

Nebula is a WordPress theme framework that focuses on enhancing development. The core features of Nebula make it a powerful tool for designing, developing, and analyzing WordPress websites consistently, yet its deliberately uncomplicated code syntax also serves as a learning resource for programmers themselves.
https://nebula.gearside.com
GNU General Public License v3.0
143 stars 36 forks source link

Something is conflicting with Twitter widgets #1820

Closed chrisblakley closed 5 years ago

chrisblakley commented 5 years ago

Twitter timeline widgets (and possibly other Twitter widgets) are appearing and then disappearing on load.

<a class="twitter-timeline" data-lang="en" data-height="800" data-link-color="#00a1d6" href="https://twitter.com/PinckneyHugo?ref_src=twsrc%5Etfw">Tweets by Pinckney Hugo Group</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Upon inspection of the iframe, the body has nothing inside of it... <body></body>

This works fine on Codepen, so it doesn't seem like a Twitter issue– must be a Nebula conflict.

chrisblakley commented 5 years ago

This seems like a conflict with ACF Pro... When the plugin is disabled the Twitter widget works fine, but when the plugin is activated the Twitter widget disappears again.

chrisblakley commented 5 years ago

Must be something where the combination of Nebula and ACF is causing this. Just tried on poopy.life with ACF (no Nebula) and it worked fine...

chrisblakley commented 5 years ago

Ok it has something to do with the mmenu() call in the lazy load function in nebula.js...

chrisblakley commented 5 years ago

It is something within the mobileNav.mmenu(); //Initialize Mmenu itself. Whether it has options/config or is empty.

Ok: Mmenu version 6.1.8 did not have this problem, but anything later than that (7.0+) is affected.

chrisblakley commented 5 years ago

I made a Codepen here to try to recreate this, but the Twitter feed doesn't disappear on it... https://codepen.io/chrisblakley/pen/rPqOYg

chrisblakley commented 5 years ago

After literally copying the raw code from Nebula and placing it into Codepen, the problem does not happen... Could there be something else going on? Maybe like a browser extensions or something? https://codepen.io/chrisblakley/pen/WPaaBj?editors=1010

chrisblakley commented 5 years ago

I just happened to notice that when not logged into WordPress, the bug does not occur. So it must have something to do with admin.js or some hard-coded JS when the admin bar is visible on the frontend.

chrisblakley commented 5 years ago

On the project I'm working on , incognito mode also does not work (on the Nebula site incognito mode works) unless I block the Hotjar script. If I block Hotjar it begins to work when not logged in. However, neither site has worked while logged in yet.

I reverted jQuery to use the WordPress version and call from the <head>. I've also blocked all other scripts and it still disappears when logged in.

chrisblakley commented 5 years ago

Might be a conflict with Query Monitor... When I remove all of the QM Output code, the Twitter feed comes back. https://codepen.io/chrisblakley/pen/WPaaBj?editors=1010

Edit: Yep, if I deactivate Query Monitor (and also block the Hotjar script) the Twitter feed works fine both logged in and incognito.

Edit Edit: Ugh... on the Nebula documentation site disabling Query Monitor does not fix the problem.

Edit: ...and now even the project with Query Monitor disabled is problematic again. I still don't know why it only happens when logged in, but when I disable (or use an older version of) Mmenu it works fine.

chrisblakley commented 5 years ago

After debugging inside of mmenu.all.js with locaI overrides, I can narrow it down to something inside of the _initMenu function... I know it's something right after this.conf.clone but haven't been able to narrow it down further yet.

screen shot 2019-02-15 at 4 19 26 pm

Something within the spaced out lines. That commented out line never gets triggered (at least in my environment).

Edit: Ok, it is caused on this.trigger("initMenu:after") which means its something that is listening for that event.

chrisblakley commented 5 years ago

Ok, now I've narrowed it down to something in here: screen shot 2019-02-15 at 4 34 15 pm

And it is not the _initBlocker function.

chrisblakley commented 5 years ago

Ok, it is the this.setPage(a.$page), line that is doing it. If I comment that line out everything works fine.

chrisblakley commented 5 years ago

That line appears in the file jquery.mmenu.offcanvas.js. https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.3.0/core/offcanvas/jquery.mmenu.offcanvas.js

Which is located here: https://github.com/FrDH/jQuery.mmenu/blob/master/src/core/offcanvas/jquery.mmenu.offcanvas.ts#L60

//  Setup the page
this.setPage( glbl.$page );

This means if the bug is not a layout/structural html issue that it could be caused by the setPage function itself or anything that listens for the setPage:after event. https://github.com/FrDH/jQuery.mmenu/blob/81d3d5475ffeceb9737a86bfcc877250a895921d/src/addons/fixedelements/jquery.mmenu.fixedelements.ts#L24-L69

chrisblakley commented 5 years ago

Following it a little further, I've narrowed it down to somewhere in here: https://github.com/FrDH/jQuery.mmenu/blob/210244a32c3c8e29ed33b0e6812b289ff85f0e03/src/core/offcanvas/jquery.mmenu.offcanvas.ts#L409-L426

screen shot 2019-02-17 at 7 12 49 pm

Ok, specifically it is this line:

e = e.wrapAll( '<' + this.conf[ p ].page.nodetype + ' />' ).parent();

Which is this unminified: https://github.com/FrDH/jQuery.mmenu/blob/210244a32c3c8e29ed33b0e6812b289ff85f0e03/src/core/offcanvas/jquery.mmenu.offcanvas.ts#L422-L424

chrisblakley commented 5 years ago

Ok what is happening is that Mmenu is detecting that the <body> does not have a proper wrapping inside of it (what Nebula provides as <div id="body-wrapper">. The reason is because other libraries are adding things outside of that wrapper.

Some offending elements:

chrisblakley commented 5 years ago

It seems that the <div> that Query Monitor is adding outside of the <div id="body-wrapper"> element is the problem. That would explain all of the issues outlined above– particularly the reason it only breaks when logged into WordPress.

This <div> is being added outside of wp_footer() which is placed right before the close of the Nebula body-wrapper div. I'm sure that is done for a good reason– I know Query Monitor has the new debugging interface so that may need to live outside of any theme elements to work properly. Maybe it can be moved, though?

chrisblakley commented 5 years ago

I'm still not sure why the pageSelector config option isn't working in Mmenu...

offCanvas: {
    pageSelector: "#body-wrapper"
}

As described here: http://www.mmenujs.com/tutorials/off-canvas/the-page.html

chrisblakley commented 5 years ago

https://github.com/FrDH/jQuery.mmenu/issues/969#issuecomment-466522396 The Mmenu config option changed for offcanvas:

offCanvas: {
   page: {
      selector: "#body-wrapper"
   }
}

https://mmenujs.com/documentation/core/off-canvas.html

This has solved the problem.