1

I have a fixed header that scrolls above every other element in Safari and Chrome but some elements (not all) stay above the header in firefox. For instance, some img go above while others go below (all are in the .main-content div). I have narrowed the problem down to a class called .is-moved-by-drawer and its will-change: transform property. Any ideas on how to fix this?

Here is a codepen: http://codepen.io/bt61/pen/aNMJpz

<div id="PageContainer" class="is-moved-by-drawer">
  <header class="site-header" role="banner" style="position: fixed; max-height: 93px;">
  <nav class="nav-bar large--hide" role="navigation">
  <main class="wrapper main-content" role="main" style="padding-top: 123px;">
  <footer class="site-footer small--text-center" role="contentinfo">
</div>

.is-moved-by-drawer {
    transition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1) 0s;
    will-change: transform;
}

html, body, #PageContainer {
    display: inline;
    height: 100%;
    margin: 0;
    min-height: 100% !important;
}

.site-header {
  background: #000 none repeat scroll 0 0;
  position: fixed;
  transition: all 0.3s ease 0s;
  z-index: 999999;
}

.main-content {
    display: block;
    padding-bottom: 60px;
    padding-top: 30px;
}

If I change .main-content:

.main-content {
    display:block
    padding-bottom: 60px;
    padding-top: 30px;
    position: relative;
    z-index: -1;
}

It fixes the header over everything else z-index problem but all elements in .main-content become unclickable.

bt61
  • 11
  • 4
  • 3
    http://stackoverflow.com/a/35772825/3597276 – Michael Benjamin May 10 '16 at 21:27
  • you want to display body and html as inline? What is that supposed to do? – Pevara May 10 '16 at 21:29
  • @Michael_B mind elaborating? The element in question has position, so I don't think that's the issue... – Pevara May 10 '16 at 21:31
  • @Pevara, `.main-content` is not positioned. – Michael Benjamin May 10 '16 at 21:33
  • can you post some more html? None of those elements have content and they are not closed. – Pevara May 10 '16 at 21:36
  • @Michael_B `main-content` has no z-index either, so why should it be positioned? As I understand it the `site-header` is supposed to be on top, and that one does have position and z-index. – Pevara May 10 '16 at 21:38
  • @Pevara, you wanted me to elaborate. Here you go: http://stackoverflow.com/a/32515284/3597276 – Michael Benjamin May 10 '16 at 21:43
  • @Michael_B if I give .main-content a position: relative with a z-index: 1, all of the elements of .main-content go over .site-header instead of just a few elements. Additionally, if I give .main-content a z-index: -999 it all goes behind the .site-header but becomes unclickable, and after inspecting the element it appears it is being covered by #PageContainer – bt61 May 11 '16 at 00:51
  • It's difficult to assist you when the problem can't be reproduced. Your HTML is incomplete and invalid. Please provide a [**Minimal, Complete and Verifiable example**](http://stackoverflow.com/help/mcve). – Michael Benjamin May 11 '16 at 01:02
  • @Michael_B I have added a codepen with the code. As you can see in firefox the area where you can change the quantity of the product goes over the header. – bt61 May 11 '16 at 01:18

0 Answers0