[Solved] Fixed Positioning not working in Chrome

[gmeikncc.1701]

So I’m coding a tumblr theme for my friend: I do the code, she does the art assets. It was progressing along fine and turning out mostly glitch-free in firefox, so I figured I’d show her how it was coming along. She’s using chrome and it showed up to be a glitchy pile of dung in her browser window. I opened the site in chrome and sure enough, it was a glitchy pile of dung. Again, my code was working fine in FF! But wait, it gets stranger! My simple and sub par tumblog which also uses lots of fixed positioning, is working fine in chrome! (I coded the majority of this blog the day before yesterday) What could I be doing wrong? Here is the glitchy blog and I’ve included the code for the fixed elements below. #word{
z-index:1;
position:fixed;
border-top:2px dotted white;
width:120%;
margin-left:-2px;
padding:5px;
}
#topbar{
width:120%;
background-image: url(“http://i.imgur.com/rexW3uh.png”);
margin:-8px;
height:112px;
opacity:0.25;
z-index:-1;
position:fixed;

}
#behind{
width:120%;
margin:-8px;
height:112px;
opacity:1;
z-index:-4;
background-color:#272727;
position:fixed;
}

#linkbar{
background-color:#272727;
height:38px;
width:120%;
border-top:2px solid #2d2d2d;
border-bottom:1px solid #121212;
margin-left:-23px;
position:fixed;
text-align:center;
margin-top:78px;
box-shadow: 5px 5px 20px #121212;
}

#link-text{
position:absolute; 
top:50%;  
margin-top:-5px;
}

and the html

<div>   </div>
<div></div>
<div>&lt;behind&gt;</div>
<div>
<div>embed code for music player</div></div>

thank you so much for your help!

[dgriesel]

looks fine for me in FF and Chrome, except the fixed background is scrolling with the page in Chrome.

[gmeikncc.1701]

Yeah! that’s the problem, mostly. The background and the topbar should be fixed, with the blog content scrolling behind, as it is in firefox. My question is: why would position:fixed work in FF but not Chrome? And why is it specific to this code, when something I just wrote used fixed positioning fine in chrome! it’s so weird!

[Paulie_D]

Without going through the entire code it seems that you have a whole bunch of positioning going on.

Surely the only thing that needs positioning is a single element (the nav bar) and you just put everything in that that you want to stay still.

[gmeikncc.1701]

Okay, I’ll try it! This doesn’t fix the fairly obvious problem of the background-attachment, though, which also isn’t working.

[gmeikncc.1701]

UPDATE:
Using -webkit-transform: translateZ(0); worked for other elements, but I’m still stumped about background-attachment, which still doesn’t work. is there any way to apply -webkit-transform: translateZ(0); to a background?

[Paulie_D]

I’m not sure what the heck is going on with your HTML…you seem to have invented a whole bunch of new elements.

[gmeikncc.1701]

I’m new to this and self-taught: I assumed that I could name divs whateverthecrap I wanted as long as it matched what I have in my css.

[gmeikncc.1701]

And including everything in one fixed div is just making weird stuff happen without fixing the main problem: that position:fixed was doing absolutely nothing in webkit browsers. Regardless of my weird html, everything is working fine except for the background-attachment:fixed property is also not working in webkit browsers and elsewhere on the internet isn’t helping me with that.

[Paulie_D]

I’m new to this and self-taught: I assumed that I could name divs whateverthecrap I wanted as long as it matched what I have in my css.

Clearly you were wrong.

[Paulie_D]

<topbar>   </topbar>
<word></word>
<behind></behind>
<linkbar><link-text></link-text></linkbar>

[gmeikncc.1701]

HAhahahaha Paulie_D I guess that’s not true since it’s working! I used code for fullsized background images by Chris Coyier. However, since position:fixed isn’t working for me in chrome, I used -webkit-transform: translateZ(0), but this overrode the z-index, so I also included -webkit-transform: translate3d(0px, 0px, 0px), and now everything is working a-okay in all major browsers (but I haven’t checked ie, I’ll ask my friend to later so I don’t have to install the beast)

I will not be visiting this forum again. I was able to solve my problem on my own and received little more than snarky comments from the users of this site. Your replies were devoid of constructive criticism or substantial advice, and as a serial n00b I can say that making people feel stupid without teaching them how to better themselves is a good way to discourage them from developing their skills in any area

[sunnykgupta]

Trust me, you should not form an opinion of the world after meeting a single rude guy.

You were right all along, try having a look at the discussion here: http://stackoverflow.com/q/6164000/1477051

Some will try and guide you to solutions, while others (old-school) will try to tie you up with standards. (set by them)

I’m sure you are way ahead in your HTML knowledge now. :)

[cauli]

For everyone searching for a solution to this problem:

This just happened to me, I solved it by removing any 3D transforms from the parent of the div you want fixed (mine was a completely unnecessary “-webkit-transform: translateZ(-1000px);” in the <body> tag).

Elements probably get fixed to the 3D element instead of fixing itself to the viewport (browser window) when the body is transformed.

On the custom tags discussion: http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

[Author]

Posts