0

I was trying to create a simple rotating planet with css and javascript. First I tried to put the image as a background, which worked fine in all browsers but the background-position animation had very poor performance in IE and quickly raised RAM usage (50-100 MB increase per second) until the browser crahsed. Then I decided to try using image in the planet div and animate its position which resulted in smooth animation with low memory consumption, but as you can see in the image below the image leaks beyond the border. The planet div has border-radius: 50%.

I've tried adding overflow: hidden to the planet but that didn't work. Is there a way, to prevent the leak from happening other than using some kind of mask?

planet

Elwhis
  • 1,241
  • 2
  • 23
  • 45

2 Answers2

0

So to answer my question, css3pie is not able to clip content in IE 7 and 8, therefore it is not possible.

Elwhis
  • 1,241
  • 2
  • 23
  • 45
0

You can only clip images with css3pie if you apply its behaviour on the img tag itself, or if you use the image as a background of a rounded container... I guess you want the moon to rotate around the vertical (y) axis right? It'd be possible around the z-axis... but css3pie generates images on the fly so if you need to animate the content of a rounded container it'll redraw on every frame. So no solution for that really. Kill IE maybe!?

Armel Larcier
  • 15,747
  • 7
  • 68
  • 89