Question

I have made nice spinning wheel with CSS and it renders perfectly in mozilla firefox, chrome, safari, android stock browser you name it.

THe only exceptions are Internet Explorer and Opera. The render it very ugly and I can’t seem to find where it the root cause is that it doens’t render properly because what I have read I’m following the instructions properly…

See below for the difference:

http://jsfiddle.net/cyLrm/2

The problem mainly lies I think in the following CSS Code:

background-image: -moz-radial-gradient(75% 20%, circle closest-corner, #ffffff, #ff0d0d 100px);
background-image: -webkit-radial-gradient(65% 50%, circle closest-corner, #ffffff, #ff0d0d 100px);
background-image: -o-radial-gradient(75% 20%, circle closest-corner, #ffffff, #ff0d0d 100px);
background-image: -ms-radial-gradient(75% 20%, circle closest-corner, #ffffff, #ff0d0d 100px);
background-image: radial-gradient(75% 20%, circle closest-corner, #ffffff, #ff0d0d 100px);

Also, if someone knows a way to make the css animation work under IE I would be very grateful.

Answer 1

For what i know in Internet Explorer 8-9 there is not support for gradient backgrounds and animations. I don’t know about opera you should check the specs.