Question

我有一个固定的标题，它在Safari和Chrome中的每个其他元素上方滚动，但是一些元素（不是全部）保持在firefox中的标题之上。例如，一些img在上面，而另一些在下面（所有都在.main-content div中）。我已经将问题缩小到一个名为.is-moved-by-drawer的类及其will-change：transform属性。有想法该怎么解决这个吗？

这是一个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;
}

如果我更改.main-content：

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

它修复了所有其他z-index问题的标题，但.main-content中的所有元素都变得无法点击。

Z-Index无法在firefox中使用will-change：transform css

0 个答案: