Position fixed works in Chrome & FF not in Safari (mac)

[jonassmets]

Hi All,

This is my first topic here at the CSS-Tricks forum, and I hope to find a solution for my problem here.
I’m redesigning my Tumblr blog at the moment, http://www.jonassmets.net, and its nearly finished. But now i’m having some problems. First of all, i’m not a CSS, html or javascript guru, I’m just a Dutch blogger who whats a nice blog layout. so all my code is copy past and trail and error work. And its far from valid (I’ve tried to make is at valid as possible, but validating Tumblr code is like mission impossible for me (anyone who wants to make it valid… I won’t hold you back, but thats not why i’m here).

My problem:
In the left corner you have a camera icon, when you click this you get some thumbnails and you can change the background image of the page. (it took me 3 days to get this working :-) ). This all works great, but the whole thing has e position fixed, so the camera icon is always at the top left. And it is, in FireFox and Chrome (haven’t tested in windows jet) but not in Safari.
The shadow and rotation is done with css3, and this is where the problem comes up. When I take away the css3 rotation code it works fine, even in Safari. For me the whole thing is strange because I thought Safari and Chrome both use Webkit, and present webpages the same way.

Is there anyone who can help me finding a solution?
If you need any more information, feel free to ask.

Greetings,
Jonas

[virtual]

Nice job for just a blogger :P It works in Safari 4.0.5 on my Mac and Safari 3.2.2 on XP. It does not work in IE7 or 8

[jonassmets]

Thnx,

What do you mean with it works in safari on mac? Does the camera icon stays in place when you scroll down?
Jonas

[virtual]

Sorry I was looking at the wrong screen, it’s fixed in Safari on PC not so in Safari on Mac, strange.

[jonassmets]

Yeah thats what I was thinking… really don’t understand how this comes…
Someone gave me the tip to build the rotation thing in jquery, but I really don’t know how.
And above that, I prefer css 3.
So if anyone could help me with this problem, you would be my hero!
I could finally finish this project.

Jonas

[virtual]

It’s a bug when used together -webkit-transform annuls position: fixed. The only solution for you would be to remove the rotate and just leave the image straight. If you absolutely want to have the rotated image you would need to make the whole think into a background image including the images and then use image maps over the photos to make them links.
I would start bothering about how the site renders in IE as unfortunately the majority will be viewing your site through these browsers.

[Author]

Posts