Image display/cut off issue when using Vagrant for HAML/SASS development

Question

I'm making HAML/SASS changes for a Rails app which I'm running locally using a Vagrant/VirtualBox VM on Mac OSX (Snow Leopard), and I keep encountering a really odd issue whenever I make changes to an image referenced in any of the HAML/SASS files.

Here's an example of what happens:

• I open a local Rails app page in my browser and all images are displaying correctly
• I re-size an image (using Gimp) to make it smaller and save changes
• I refresh the page to see the changes and the original image is still showing, but with the bottom cut off in proportion to how much smaller I made the image
• I remove the image file from the directory and hard refresh the page to see what happens.
• Sometimes the original cut-off image is still there, sometimes it disappears and I just see the missing image path icon
• I move the image file back into the directory to try and force it to pick up the re-sizing
• Sometimes this works first time, sometimes I have to do it 3 or 4 times before I see the correctly-sized image
• Sometimes I see the old cut off image re-appear even after I have refreshed the page and seen no image!

The same issue seems to occur if I am making other changes to the image file (e.g. if I'm saving an entirely new image with the same file name). Apart from this image issue, all edits to HAML/SASS files work, and I can instantaneously see my changes.

I thought it might be some sort of browser rendering/caching issue, but similar issues occur in Firefox and Chrome. If I use Firebug I can sometimes see that the correct file is being picked up but it's not showing in the page itself.

I can only think that this has something to do with Vagrant. The only thing that is guaranteed to fix it entirely is restrating the Vagrant box, but that takes a long time.

I realise that this may not be a simple problem, as it may have something to do with our Rails app and configuration of Vagrant/VirtualBox, but I just thought I'd post the issue here in case anyone else has had similar issues.

Thanks!

Answer 1

What you're probably seeing is an issue that the VirtualBox shared folder filesystem has along with the sendfile syscall. You need to disable the use of sendfile on your webserver if you're serving files from a VirtualBox shared folder. Doing this is easy:

In Apache, add this to your configuration: EnableSendfile off

In Nginx, add this to your configuration: sendfile off;