This is pretty ugly, but it works on Safari MAC :
http://codepen.io/chrisrockwell/full/MYmdbo/
Chris Rockwell
On Wed, Jan 21, 2015 at 5:53 PM, Tom Livingston <tom...@gmail.com> wrote:
> Unfortunately, I still can't post a link for this. Hopefully someone
> smarter than me can help me based on the following info. I'm still stumped
> on this. The problem only appears in latest Safari.
>
> Given this structure and style:
>
> @media only screen and (min-width:960px){
> .topper{position:fixed;z-index:1000;}
> header{position:fixed;z-index:0;}
> section, aside, footer{position:relative;z-index:500;}
> }
>
> <div class="wrap">
> <div class="topper">[children]</div>
> <div class="header">[children, including html5 video element on one
> page]</div>
> <section>[children]</section>
> <aside>[children]</aside>
> <footer>[children]</footer>
> </div>
>
> .topper is to be stacked above all others and fixed
> header is to be behind others and fixed
> section, aside and footer scroll on top of header and under topper
> Narrower @media widths have no fixed elements. All position:relative;
>
> Obviously there are more styles involved and there is additional
> content/structure inside these main elements, but this works fine in
> Chrome, FF and IE11. Safari (Mac) seems to have issues with the stacking.
> When scrolling down some pages, the header is visually on top of the footer
> or aside until I hover any link inside the aside or footer. The entire
> footer/aside then comes completely on top of the header as it is supposed
> to. However, after this occurs, the section element is sometimes *behind*
> the header which it wasn't previous to hovering the mentioned link. It's
> really very odd. Almost browser-bug like.
>
> I know a link is best, but does anyone have any ideas what might be
> happening? I have read that position:fixed; can create stacking context
> issues. I'm not sure what that means really or how to overcome it.
>
> I've tried suggestions from the first time I posted this with no luck.
>
> Any thoughts would be appreciated.
>
> Thank you again in advance.
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
