Bugzilla

Nick: if you're running up against this in real web content that you're developing, here's one workaround that should match your expected rendering in all browsers (though it may be less applicable depending on how much additional complexity there is in your actual web app).

As compared to your original testcase, I just added these 3 decls to the parent of the img element:
```css
        width: 0;
        display: flex;
        justify-content: center;
```
The zero-width works around this sizing bug, and then the `display:flex; justify-content:center` restores the centering behavior that you're looking for (instructing the img to overflow equally on both sides from its now-zero-width container).

Nick: if you're running up against this in real web content that you're developing, here's one workaround that should match your expected rendering in all browsers (though it may be less applicable depending on how much additional complexity there is in your actual web app).

As compared to your original testcase, I just added these 3 decls to the parent of the img element:
```css
        width: 0;
        display: flex;
        justify-content: center;
```
The `width: 0` declaration effectively nerfs this sizing bug (but breaks the centering of the img by offsetting it to the right of center); and then, the `display:flex; justify-content:center` restores the centering behavior that you're looking for (instructing the img to overflow equally on both sides from its now-zero-width container).

Nick: if you're running up against this in real web content that you're developing, here's one workaround that should match your expected rendering in all browsers (though it may be less applicable depending on how much additional complexity there is in your actual web app).

As compared to your original testcase, I just added these 3 decls to the parent of the img element:
```css
        width: 0;
        display: flex;
        justify-content: center;
```
The `width: 0` declaration effectively nerfs this sizing bug (but breaks the centering of the img by offsetting it to the right of center); and then, the `display:flex; justify-content:center` restores the centering behavior that you're looking for (instructing the img to overflow equally on both sides from its now-zero-width container).

(For completeness: I found one scenario where Chrome renders your original testcase slightly differently from this one -- it happens when the img is squashed to a very small height, smaller than a line-height.  That triggers some special baseline-alignment behavior in your original testcase (due to the fact that the img is inside of a block flow with an automatic line), which is probably not behavior that you care about or want.  If you add `vertical-align:top` to the `img` in the original testcase, then it removes that special behavior and ends up pixel-for-pixel-identical to this comment's attached workaround, at all window sizes, I think.)

Nick: if you're running up against this in real web content that you're developing, here's one workaround that should match your expected rendering in all browsers (though it may be less applicable depending on how much additional complexity there is in your actual web app).

As compared to your original testcase, I just added these 3 decls to the parent of the img element:
```css
        width: 0;
        display: flex;
        justify-content: center;
```
The `width: 0` declaration effectively nerfs this sizing bug (but breaks the centering of the img by offsetting it to the right of center); and then, the `display:flex; justify-content:center` restores the centering behavior that you're looking for (instructing the img to overflow equally on both sides from its now-zero-width container).

(For completeness: I found one scenario where Chrome renders your original testcase slightly differently from this one -- it happens when the img is squashed to a very small height, smaller than a line-height.  That triggers some special baseline-alignment behavior in your original testcase (due to the fact that the img is inside of a block flow with an automatic line).  I suspect that baseline-alignment-to-a-secret-line is not behavior that you care about or want.  If you add `vertical-align:top` to the `img` in the original testcase, then it removes that special behavior and ends up pixel-for-pixel-identical to this comment's attached workaround, at all window sizes, I think.)