Since upgrading to the WP v4.5, my custom theme appears to be preventing the image modal window from popping up. I’ve verified it’s something in my theme as switching to Twentyfifteen it loads fine.
My question is where should I begin with debugging this. I’ve removed all other plugins, and I’m not getting any error messages in the Chrome Console. Any general direction would be appreciated!
My custom theme is based on the excellent Zurb Foundation (v5.5.3) framework. Included in that library is the normalize.css CSS reset (normalize.css v3.0.3 - github.com/necolas/normalize.css).
I’ve narrowed this issue down to something in that normalize.css file as commenting it out seems to remove the issue with the media modal popping up.
Any ideas on what could be happening here?
Alright. Further debugging has revealed that it’s not the normalize.css file that is causing problems, but rather the “Tables” SASS file that is included. Everything loads perfectly when that single file is commented out.
Here’s a link to the offending file: https://github.com/zurb/foundation-sites/blob/V5/scss/foundation/components/_tables.scss
The trouble is, this seems to be some sort of JS related issue. However, completely removing/de-enqueueing all of the theme’s JS doesn’t solve the issue. Only by removing that SCSS file am I able to get the media modal to launch.
When the file is included, instead of the media modal div being appended via jQuery to the end of the front-end HTML, an anchor tag with the class “browser” is appended. When the SCSS file is commented out the media modal is appended as normal.
With Foundation Tables CSS: https://www.dropbox.com/s/cf9ln1zg7eetjsd/Screen%20Shot%202016-04-18%20at%205.28.43%20PM.png?dl=0
Without Foundation Tables CSS: https://www.dropbox.com/s/3xm8a0pkfmq258r/Screen%20Shot%202016-04-18%20at%205.31.17%20PM.png?dl=0
Hey Philip!
Thank you so much for the very detailed analysis of the problem and I think this might be related to an issue recently discovered caused by the changes WP made in their jQuery. The problem is triggered by a CSS code added on tables. You can find out more about it from this discussion and a fix released by Justin here.
Jun
Hi Jun,
Thanks for your reply. I can indeed confirm that this is the same bug. The Normalize.css file I mentioned in my earlier comments includes the border-collapse:collapse CSS directive. This causes the modal to not open correctly as jQuery believes that the item is already visible on the page.
This also explains why it appeared to be a JavaScript related issue, but was only resolved when the CSS style was removed.
Any suggestions on how to fix this bug without modifying WordPress core files?
Thought I’d drop a quick note to let you know that v1.7.7 of the BB Plugin does indeed fix and address the issue. I’m able to keep the border-collapse:collapse directive while still launching the Media modal from the front-end.
Thanks for the prompt response!
Hey Philip!
Yes, we just released v1.7.7 moments after I responded to you. Should have got back to you and notified you about the update and fix. Sorry about that!
Jun
