Solution!
The issue was that the javascript was running before the images were loaded (thereby resulting in an offset positioning that got calculated before the image was present). The solution was to load the javascript after everything else had been loaded by changing the last two lines of my coffee script:
ready = ->
$('.affixable').affix({
offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);
to
ready = ->
$('.affixable').affix({
offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(window).load(ready);
$(window).on('page:load', ready);
I don't know if this will happen on heroku, or other servers, but it sure helps to ensure it won't by using the latter code instead.