IE 9 Absolute Positioning not Behaving as Expected - <img> with bottom positioned in the center

Question

I'm trying to position an <img class="building"> inside of a <div class="content-box primary"> using the following CSS selectors:

.content-box.primary{
    position: relative;
    width: 100%;
    height: 800px;
}
.building{
    position: absolute;
    bottom: 19px;
    left: 50%;
    z-index: 15;
    max-width: 1000px;
    height: auto;
    transform: translateX(-50%);
}

Here is a clarification of what the HTML structure is:

<div class="content-box primary">
    <img class="building">
</div>

Note the transform is actually a LESS Mixin for proper browser prefixes so as far as I know that is not the problem here.

This is how it is expected to look.

This is how it looks in IE9.

I would've posted images but I currently don't have enough points.

Does anyone know why IE9 is doing this?

Answer 1

So the issue seemed to be that the image was an SVG and IE9 has strange scaling behavior when it comes to SVG images.

The solution was to add a Polyfill if any IE version is detected to replace the SVGs with the fallback PNGs.