Why we spent 2 hours fighting the impossible.
The way we organize our projects and work is by creating, working on and completing Asana tasks. So today one of them labeled “Add popup on button click” came in line. Well, nothing serious here, with the setup we have: foundation will do the job.
An important note: we are not using the full 7000 lines of css from foundation and so far not using its JavaScript as well. What we are doing is extracting its grid (which is awesome) and whatever mixins and variables are needed to make it work properly so that the end result is clearing up more than 4000 lines CSS. This setup is properly working on quite a few projects, so no problems were foreseen for the moment.
As a part of our process, we went to the foundation’s documentation for its modal popups and set what was required – the foundation.js file, followed by foundation.reveal.js + running the whole thing with $(document).foundation(). Next of course we had to style the modal and decided to use what is provided by default and build on it further, so we copied their reveal.scss file and modified the variables so they wouldn’t break.
Where things went wrong
So we pasted the example code shown in the documentation, expecting to see a popup on click, but there was nothing. No response, no change in the DOM or anything. Of course, the first thought was that some of the files were not included properly so we checked them. Then we double checked again and they were all good. So then maybe the scss file was incomplete, but when we removed the display: none and visibility: hidden from the modal it showed up. So the problem was not wrongly linked files or non-styled elements.
Next step of the long debugging process was making sure we follow everything written in the documentation. Making sure the order of included scripts is good, making sure we are running the scripts properly, everything you can think of. After that we decided that we should be running the modal from JS instead of clicking the link. The result was sadly expected – nothing worked out. Well because of not observing any DOM changes and seeing the CSS update + not receiving any grunt errors or 404 ones, the only conclusion was that the problem is somewhere in activating the script or having the proper selectors.
A few times before we had issues with minified versions, so the next step was making sure we are using the proper non-minified jQuery version and non-minified foundation. The result – the modal was not working still. Well maybe it was cache even if it didn’t sound like that, but we had to make sure.
We did a test from another browser – Vivaldi and still, no modal was visible. In order to make sure it can actually work, we downloaded the full foundation install and set up a modal there. After clicking on the “click me” link, a nice animated popup appeared. So obviously something was wrong, maybe WordPress was parsing in a wrong way the JS or CSS or the whole HTML structure. The next step was to remove WP and test it out statically. Ctrl+S on the page, save in some folder and open the .html file from there. Result – Still not working.
Time to clear up things, we removed all of the html inside the <body> tag and added only the snippet required for the modal to work, which is about 5-6 lines of basic markup containing a few attributes and classes. Still not showing up. Also worth mentioning, JS was not disabled, we did many console.logs that were printing properly.
So left with that simple html file we went on and cleared even more – all non-related scripts and styles, anything that is not needed to show the modal, including meta tags. The remaining html was about 15 lines long, same as the sample one we used from the working, non-edited version, downloaded directly from foundation. Next step – copy everything from our test version and paste it in the control one, where only the URL was changed so we got no 404 errors.
Now it worked like a charm! Why? Well two reasons, one could be the CSS, the other the JS files. Against our presumptions, the JS files were not the cause of the issue, it was the CSS. When we copy-pasted the 7k lines into our minified master.css file the modal showed up. How can CSS make your JavaScript non-executable? Well it wasn’t broken, no semicolons or brackets were missing, it was valid code from the start.
The culprit
Time to debug some stylesheets. We removed our minified code completely, leaving the original foundation code. It was still working properly, so we began deleting chunks of code until the one making it break showed up. Our test included clicking the action link and watching for DOM changes.
After deleting more than 99% of the code some interesting rules remained that were not really styling or targeting existing elements. In order to make sure which line is the cause of more than 2 hours spent on debugging this, we deleted and refreshed line after line. The end result was really surprising – just 65 characters of CSS in total were enough to make sure the JavaScript will not run.
And here are they:
meta.foundation-data-attribute-namespace { font-family: false; }
Leaving a side the meta selector, font-family: false was just a nonsense. According to CSS’s specs, the only allowed arguments for the font-family property are font|initial|inherit;
So as a summary – if you are using Foundation as it is, everything will be ok, but if you decide to strip all of the needless code and free some bandwidth, you must make sure this line is added in your code, even if you don’t see any markup being styled or targeted by it.
Team DevriX
This article is crafted by DevriX's seasoned marketing team, boasting over four decades of collective expertise in crafting sophisticated marketing funnels, devising comprehensive content frameworks and pillars, implementing engaging email campaigns, and creating impactful social media content designed for scalability.
Our marketing experts specialize in the complete spectrum of inbound marketing strategies. As an accredited HubSpot Agency Partner and a Semrush Partner, we engage in meticulous research, blending our extensive experience with the unique insights of our highly skilled team.
We set benchmarks in content creation by incorporating cutting-edge marketing trends, leveraging in-depth industry research, and utilizing state-of-the-art AI tools for data segmentation and captivating content hooks. Our proficiency extends across a diverse range of sectors, including working with SMEs, Fortune 1000 companies, global B2B brands, major publishing entities, WooCommerce platforms, business directories, and affiliate networks.