CODEWITHSUNDEEP
csssvginternet-explorer-9background-imagecss-transforms
samy-delux
samy-delux

Reputation: 3069

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

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.:

Rendering in Chrome 22

But actually looks like this in IE9:

Rendering in Internet Explorer 9

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.

Upvotes: 6

Views: 2093

Answers (3)

anthony-dandrea
anthony-dandrea

Reputation: 2813

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

Upvotes: 0

Joan Charmant
Joan Charmant

Reputation: 2032

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/

Upvotes: 2

jfd
jfd

Reputation: 1149

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.

Upvotes: 0

Related Questions