SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with fixed positioning in Safari (Mac)

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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

    Code:
    .videoBG {
        width: 100% !important;
    }
    Otherwise, try to figure out why the JS isn't working right in Safari.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    #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:

    Code:
    <div id="media_video_blog">
    		<div style="position: absolute; top: 0px; left: 0px; height: 330px; width: 1307px; z-index: 1;" class="videoBG_wrapper">
    				<div id="media_video_blog"> </div>
    		</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. #5


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
  •