border-box + padding + max-width = jumping elements?

border-box + padding + max-width = jumping elements?

Please have a look at these two fiddles:
http://jsfiddle.net/Fw4dg/2/embedded/result/
<style>
.outer, .inner {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.outer {
max-width: 600px;
border: 1px solid #0f0;
padding: 40px 10%; }
.inner {
border: 1px solid #f00; }
</style>
<div class="outer">
<div class="inner">
<p>Watch the parent element's padding change when you narrow the
viewport.</p>
</div>
</div>
When you narrow the window past the edges of the exterior box, that box's
horizontal padding suddenly shrinks, and remains at its new width even
after widening the window again (WebKit and Gecko).
http://jsfiddle.net/Fw4dg/1/embedded/result/
In another example, the second floated element clears the first floated
element after the window is narrowed and widened again (WebKit only):
http://jsfiddle.net/Fw4dg/1/embedded/result/
This behavior is in both WebKit (tested in Safari 6.0.5 and Chrome
29.0.1547.49 beta) and Gecko (tested in Firefox 23 beta 10). It happens
with or without the borders.
If you narrow and widen the window repeatedly, you can get some pretty
strange effects in Safari:

The closest bug report to this that I could find is in Bugzilla, but
doesn't seem to be describing quite the same thing:
https://bugzilla.mozilla.org/show_bug.cgi?id=308801
Is this a known issue?