CSS 2D transform with SVG background-image in Internet Explorer 9

Question

I've created a left and right navigation button using only a single SVG background image and flipping it horizontally to get the other direction. This works fine in all browsers which support CSS 2D transforms except Internet Explorer 9. Basically the CSS looks like this:

div.nav-left, div.nav-right {
    background-image: url('TriangleArrow-Right.svg');
}

div.nav-left {
        -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
                transform: scaleX(-1);
}

I've created a jsFiddle which correctly looks like this in Internet Explorer 10, Firefox, Chrome, Safari etc.:

But actually looks like this in IE9:

I've included a greater-than sign to illustrate in which direction the buttons should point. And actually you can see, that IE9 applies the transform correctly to the text, but does the total opposite for the SVG background image.

If I change the SVG background image to a PNG, everything works correctly in IE9 however, see this jsFiddle.

I was unable to find any information on this. It seems to be a bug, as IE9 should support CSS transforms and SVGs as CSS background correctly.

Wellfound

Answer 1

I think you need to use the special syntax for IE:

div.nav-left {
    -webkit-transform: scaleX(-1);
    /*-ms-transform: scaleX(-1);*/
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/g2y86/1/

It doesn't look very sharp though, maybe there's a better way.

Edit

For flipping, try with this (note that both -ms-filter and filter lines are for IE) :

div.nav-left {
    -webkit-transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/2cPYR/

Guimpe

Unfortunately my image is not rotatable. It has to stay upright and can only be flipped horizontally and not vertically (where rotating by 180° will do both). – Wellfound

As you said it does not look very sharp and IE filters don't support alpha transparency (and even though IE9 supports it correctly on SVGs & PNGs, when using filters it breaks). You still get my upvote, but it's not a solution for me... – Wellfound

@samy-delux: maybe it's simpler and more semantically correct to use two different images (if possible). – Guimpe

Yes, that's what I'm doing, switching IE9 to use the PNG we have in place for IE8 as well anyways. – Wellfound

Answer 2

From what I tried the scaleX-property indeed won't work with negative numbers on an svg background image. If you apply differnt colored borders to the div your are trying to transform you can see, that it actually gets transformed correctly, but the background image is not adapting to its container.

If you just want to solve your immediate problem, you can use -ms-transform: rotate(180deg);, the svg seems to know what it is supposed to do here.

Hebraize

This does not work. I've already tried this approach, see here: jsfiddle.net/hj7Tg/17 or could you provide a working jsFiddle? – Wellfound

right sorry .. I forgot that I changed the divs into static elements instead of positioned ones too ... maybe it helps anyway jsfiddle.net/7evDa – Hebraize

But as soon as I add back the absolute positioning it breaks again: jsfiddle.net/7evDa/3 – Wellfound

Answer 3

I used filter: FlipV; to accommodate ie9

-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9

Recipe