SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot stikkybubble's Avatar
    Join Date
    Sep 2006
    Location
    Pluto
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS3 transform, rotate: flash of redrawn content

    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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hmm, works flawlessly for me on that version of Safari on Mac. Are you on Mac or PC?

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot stikkybubble's Avatar
    Join Date
    Sep 2006
    Location
    Pluto
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •