Problem with fixed positioning in Safari (Mac)

HTML & CSS
1

Hey.

I’m having a problem in Safari on a Mac where fixed positioned elements aren’t behaving as fixed elements. I have a class with position: fixed and top: 0 applied to a few elements (header, aside and nav). This works okay in Firefox, okay-ish in Chrome (it works fine but sometimes the elements will glitch elsewhere on the screen, weirdly), and as I said, not at all in Safari.

Here’s the link: http://xnthony.com/html/index7.html

I’d appreciate any help.

2

The problem I see is that the videoBG dis does not cover the whole width of the screen in Safari. It appears to be a problem with the JS that sets its width. Perhaps you could just override that in your CSS with

.videoBG {
    width: 100% !important;
}

Otherwise, try to figure out why the JS isn’t working right in Safari.

3

Thanks for the response.

I’ve changed the layout of the page and now the fixed property won’t work in Chrome either.

I’ve isolated everything on the page and it seems the problem is to do with the absolute positioning of #media_video_blog, when I make this relative the sidebar works and is fixed. Odd.

Here’s the page with the video and sidebar isolated: http://xnthony.com/html/video_fixed.html

4

Hi,

Chrome seems to have issues with fixed positioning and the video tag when there is a negative z-index thrown into the mix on the video or a parent.

Try changing the z-index to zero here:


#media_video, #media_video_blog {
	z-index:0;
}

You should be able to layer all elements without using a negative z-index anyway.

Note that the generated source of that html is invalid also as you have the same id in there twice:


<div[B] id="media_video_blog"[/B]>
		<div style="position: absolute; top: 0px; left: 0px; height: 330px; width: 1307px; z-index: 1;" class="videoBG_wrapper">
				[B]<div id="media_video_blog"> </div>[/B]
		</div>
		<div style="position: absolute; z-index: 0; top: 0px; left: 0px; height: 330px; width: 1307px; opacity: 1; overflow: hidden;" class="videoBG">
				<video src="video/xnto_superslo2.webm" autoplay poster="tunnel_animation.jpg" style="position: fixed; z-index: 0; top: 0px; left: 0px; min-width: 100%; min-height: 100%;"></video>
		</div>
</div>
5

Thread continued in JS Forum.