border-box + jQuery + Drupal = :(

Recently I’ve been working on a project that broke it’s content out into small chunks as you scrolled down the page. As each chunk of content came fully into view, there was an asset (image, YouTube video, etc.) that was supposed to fade in next to the copy. jQuery’s Waypoints library makes amazingly short work of this task.

I’ve used it before, on larger animations that needed support back to IE7, so I was rather surprised when I started browser testing and my fades didn’t work in IE8. More specifically, they only worked after I made a change to the viewport; resized the browser window or opened up the developer tools for example. And so I started the process of finding the small number of items that added up to roughly an afternoon of Googling.

1. border-box

Recently, Elevated Third had made some updates to the starter theme that we begin all of our projects with. One of those changes was adding…  

* {box-sizing: border-box;}

… to our reset. If you’re not familiar with this handy bit of CSS, I’ll let Chris Coyier sum it up for me in his post. Short version: it changes how browsers understand the box-model to actually make sense, and it’s supported in IE8+. So how did this then break my JavaScript in IE8?

2. jQuery

Turns out, earlier versions of jQuery (v1.7 and below) didn’t know how to calculate dimensions of elements that were set to use border-box and therefore, scripts that relied on those calculations broke. So consider Waypoints, which by default is triggered when your selected element hits the top of the viewport. Then consider my own jQuery to adjust Waypoints’ trigger position to fire when the content comes into full view instead of the top of the page...

return $(window).height() - $(this).height();

Now I know what you’re thinking. “But this bug has been fixed right? Just update your site’s version of jQuery.” Well...

3. Drupal

Drupal 7 ships with jQuery v1.4.4 out of the box. The jQuery Update module will get you to v1.8 but it has a tendency to break some things. Particularly View’s admin UI does not work with v1.8. Version 1.7 sorta limps along and v1.5 works fine in my experience so what you need is a way to set different versions of jQuery depending on if you’re on the frontend or in the admin. To summarize that long running thread, this feature is now in the dev version of jQuery Update.

Where does that leave us?

The fix if you want to keep using border-box is to use the dev version of jQuery Update module. You then configure the frontend to use v1.8 and the admin to use v1.5. That’s not to say it can’t break other things depending on your site, but in my case it worked. It’s also worth noting that this could be a problem that’s not specific to jQuery Waypoints.

If you’re using any scripts that need to get the height and/or width of page elements, you will probably fall prey to this list of conspiring events. Aside from jQuery Update, the other option is to just not use border-box. Just being aware this could be an issue on your next project, and planning accordingly could save you a mess of headaches closer to the end of your build.