Is there a way to work around the following bug. I have a slideshow object whose images can resize to fit. The implementation is to set them up in a list

Code html:
<div class="frame">
  <ul>
    <li><img></li>
    <li><img></li>
    <li><img></li>
  <ul>
</div>

The relevant css

Code css:
.frame {
  width: 100%;
} 
 
.frame >ul {
  position: relative;
  white-space: nowrap;
 
}
.frame >ul >li {
  position: relative;
  display: inline-block;
}
 
.frame >ul >li >img {
  width: 100%;
  height: auto;
}

Works just fine in IE 8, 9 and Firefox. If I remove the whitespace call it will work in webkit too, at the cost of having all the inline elements show up as a stack in all browsers.

Since I need to use javascript to animate the elements anyway, I'll probably fix this by having javascript force the computed width onto the images for webkit at run time :\ Still, this is annoying.