0

Getting some strange cross browser CSS3 behaviour when rotating an image. On this page http://www.coral.co.uk/sports-betting-50 the bottom 1-2-3 circle images have a shiny ring over them, which is rotated via jquery manipulating CSS, when you hover over them.

-webkit-transform: rotate(180deg); 
transform: rotate(180deg);

The rings turn centered perfect in IE and Firefox but in Chrome the rotation looks off by 1-2pixels. I have verified the image, it is a perfect circle and bang centered as a png.

Any ideas why this behaves different in Chrome?

Your help would be much appreciated.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
user1983961
  • 1
  • No it's not centered even before rotation. It is just that the bigger gap rotates on the top and you see it better. – kidwon Jan 16 '13 at 14:38
  • Did you know you can [animate CSS3 rotations without using JavaScript](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions)? – Blazemonger Jan 16 '13 at 14:39
  • 2
    @kidwon I noticed the same thing, and also that the ring has `left:34.4px;` whereas the other circle has `left:34px;`. I played with the value in dev tools, but it still had the gap. – Tom Pietrosanti Jan 16 '13 at 14:41
  • I saw the floating point too, but it seems that it's not the basic problem. – kidwon Jan 16 '13 at 14:43
  • I changed the value to `34.8px` and that seemed to get the desired effect. I know that the browsers handle fractional pixels differently, so that could be the issue... Not positive, though. – Tom Pietrosanti Jan 16 '13 at 14:48
  • Also it might be easier to position the images relative to their parent. Seems now they're absolutely positioned relative to some ancestor (I didn't dig deep enough to find out). That way you'd be able to use a single set of rules for each of the 3 links. – Tom Pietrosanti Jan 16 '13 at 15:00
  • we changed the rotating circle to fractional 34.4px to try resolving the issue. It worked for IE and FF, not for chrome. Same issue if we have none-fractional 34px on both rings – user1983961 Jan 16 '13 at 15:28
  • did you try the backface-visibility css property? – dbaq Dec 17 '13 at 02:45

0 Answers0