Icon disappears in IE9 and IE10 when rotated

Question

I am having a problem in IE9, IE10 and IOS 8 when using transform: rotate(180deg) , the icon disappears.

I tried using the -ms provider prefix, but did not use.

JSFIDDLE
Test on Modern.ie

 .down-arrow { -ms-transform: rotate(180deg); transform: rotate(180deg); -ms-transform-origin: center; transform-origin: center; width: 16px; height: 16px; } svg { max-height: 100%; max-width: 100%; vertical-align: top; } 

 <div style="display:none"> <svg> <symbol id="down-arrow"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.527,6.854L0.202,1.042c-0.269-0.288-0.269-0.754,0-1.042h8.621 c0.269,0.288,0.269,0.755,0,1.042" /> </symbol> </svg> </div> <div class="down-arrow"> <svg> <use xlink:href="#down-arrow"></use> </svg> </div> 

And I think that this is connected not only with SVG, but also when using html elements. Check out this sample script.

 .down-arrow { width: 0; height: 0; border-width: 12px; border-color: #000 transparent transparent transparent; border-style: solid; -ms-transform: rotate(180deg); transform: rotate(180deg); -ms-transform-origin: center; transform-origin: center; } 

 <div class="down-arrow"></div> 

Answer 1

you can use svg for everyone

I created a test pen here: http://codepen.io/mkdizine/pen/PbyZoM , I also tested on WIN 7 and IE9, and the image is here:

https://app.crossbrowsertesting.com/public/ic7b2b4fec0f754a/livetests/6573248/snapshots/z1482ad843f3e76a100f

The only thing I did was that I included an external JS file:

 https://cdnjs.cloudflare.com/ajax/libs/svg4everybody/2.1.3/svg4everybody.min.js 

and called

 svg4everybody(); 

hope that helps