CSS3 transform, rotate: flash of redrawn content

HTML & CSS
1

Hi, just making some more adjustments to my blog and added transform: rotate to my logo image.

I am viewing in Safari 5.0.4 at the moment.

Here’s the url:

Cybertramp Web Design

If you hover your mouse over the top round logo you should see it rotate in safari and FF4.

In Safari the content below it on the page flickers and seems to be re-drawn (?) both on mouseover and mouseout.

Does anyone know why this happens and is there a way to stop it?

My code by now is fairly arcane. It’s a WP install with several CSS files for different parts of the design. However this is what I used for the rotation:

span#image {
display: block;
background-image: url(‘…/images/logo3.45.3.png’);
width: 150px; height: 150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
span#image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

span#image is inside span#logo, which has the round white border. I tried setting overflow: hidden on span#logo, as at first I assumed that perhaps the invisible corners of a square image were pushing the rest of the page up and down as it rotated.

It did absolutely nothing, and it wouldn’t really have made sense anyway if it did as the image is a background image on a span, not an actual jpg plonked on the page.

I used this effect on my main front page as well (http://thecybertramp.com/), and it doesn’t seem to be happening there. Is this something to do with the way I position lower elements? Does anyone have any clue at all?

It would be a nightmare to start hacking about with the absolute/relative/fixed positions of the other elements on the page, or even to describe them! I would give it a go if need be, but at the moment it’s 12.30am on Saturday night and I’m not a complete masochist!:eek:

2

Hmm, works flawlessly for me on that version of Safari on Mac. Are you on Mac or PC?

3

FYI: The blog logo rotates in Opera and Chrome for Win, web logo does not. In FF for Win, the blog logo does not rotate, and the web logo displays as a square.

4

how strange, I was convinced it was something to do with how I positioned the navigation menu on the right - on my “whois” page I get no flicker (it has its own different sidebar).

I suppose it could be just that I was running too many programs and my computer itself was stuggling. I’m on mac by the way.

As for the other comment - I was aware that different browsers do/don’t spin and do/don’t display the logo as a circle. The html is different on the 2 pages for a start. It’s interesting that the blog one IS rotating in Chrome and Opera.

I will have to have another look, it’s possible I got confused about which browser(s) this should work in, and all is as expected. I have tested my “web” page in all the browsers (I think) but not the blog.

If a solution can be found that makes everything work properly in all of them obviously that would be cool. What’s interesting is that little differences in how exactly the rotating elements are arranged is apparently causing different behaviour.

Anyway I will have another look at this later on today. It’s no good if it’s related to computer performance - obviously it’s the lowest common denominator that sets the bar. People on Safari hang around about 4 times longer on my site than other browsers at the moment (and just forget about Internet Explorer, they bounce like indiarubber) …

Thanks for having a look, guys, much appreciated.

EDIT: PS it’s important that it’s FF4 - some of this stuff doesn’t work in FF3.x!