Responsive Images won't Scale with Firefox as screen size is adjusted. Works in other Browsers

Question

I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:

img {   
  max-width: 100%;   
  width: auto;   
  height: auto; 
}

As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%; Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.

Anyway, I got things to work by overriding the image width a Firefox specific directive like this:

/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
@-moz-document url-prefix() {  
  img {   
    width: 100%;   
  }
}

I don't think I should have to do this, and googling doesn't seem to come across this issue.

Answer 1

This is the default CSS that is used for responsive Images:

img {
  max-width: 100%;
  height: auto;
  width:100%;
}

And this is the indispensable Javascript: Bongard.net

Thanks to David Bongard for the Javascript.

Now add the following to the "if safari" rule of the Script:

for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
  document.getElementsByTagName("img")[i].style.width = "auto";
  }

Safari wants width:auto; the rest of the browsers i tested are happy with width:100%;