桌面webkit(safari/chrome)中的奇怪渲染错误,具有绝对定位的元素

Question

如果您在这里查看视频:http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov - 您将看到问题在于行动.基本上,我有以下内容:

<section id="sidenav">
  <h1>TEXT HERE</h1>
  <ul>
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
    <li>Tab Four</li>
  </ul>
  <div id="tab"></div>
</section>

Sidenav绝对定位,像这样:

#sidenav {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 770px;
  padding: 30px 0px 20px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-transition: left 0.75s ease-in-out;
  -webkit-backface-visibility: hidden;
  z-index: 10; /* This fixed it. */
}

#sidenav.hidden {
  left: -768px;
}

我有以下jQuery:

$("#tab").click(function(){
  $("#sidenav").toggleClass("hidden");
});

但是,该部分内部的元素无法跟上动画.每当我点击时,它们要么落后,要么根本不移动.但是,它们只是鬼魂,我无法点击它们.当我把侧导航带回来的时候,他们通常会赶上来,但有时他们会被打破,直到我将它们悬停在那里<li>.

请注意,这只发生在桌面上的Safari/Chrome中.iPad上的Safari和桌面上的Firefox工作正常.

谢谢!安德鲁

---

用FIX编辑:

因此,显然在sidenav元素中添加z-index:10(或任何z-index)可以解决问题.有些人要求我的整个css,所以我编辑了帖子以包含它.我不确定为什么z-index修正了这个问题,我很想知道为什么.我仍然向任何可以解释的人提供我的赏金.谢谢!

Answer 1

因此,显然在sidenav元素中添加z-index:10(或任何z-index)可以解决问题.有些人要求我的整个css,所以我编辑了帖子以包含它.我不确定为什么z-index修正了这个问题,我很想知道为什么.我仍然向任何可以解释的人提供我的赏金.谢谢!