Если вы посмотрите на видео здесь: 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");
});
Однако элементы внутри раздела не соответствуют анимации. Всякий раз, когда я нажимаю, они либо отстают, либо вообще не двигаются. Тем не менее, они просто призраки, я не могу их нажимать. Когда я вывожу сторону nav nav, они обычно догоняют, но иногда они разбиваются, пока я не надвигаюсь на <li>.
Помните, что это происходит только в Safari/Chrome на рабочем столе. Safari на iPad и Firefox на рабочем столе отлично работает.
Спасибо! Эндрю
ИЗМЕНИТЬ С ИСПОЛЬЗОВАНИЕМ:
Таким образом, очевидно, что добавление z-индекса: 10 (или любой z-индекс) в элемент sidenav устранило проблему. Некоторые люди просили о полном моем css, поэтому я отредактировал сообщение, чтобы сдержать его. Я не уверен, почему именно z-index исправил это, и мне было бы интересно узнать, почему. Я все еще предлагаю свою щедрость тому, кто может это объяснить. Спасибо!
