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!