Исправлена ошибка рендеринга в webkit на рабочем столе (сафари/хром) с абсолютно позиционируемыми элементами

Если вы посмотрите на видео здесь: 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 исправил это, и мне было бы интересно узнать, почему. Я все еще предлагаю свою щедрость тому, кто может это объяснить. Спасибо!

Ответы

Ответ 1

Ответ 2

Я бы предпочел опубликовать это как комментарий, но поскольку я новичок здесь, мой единственный вариант - опубликовать это как ответ. В примере с видео вы разместили наведение над элементами списка, разрешенными для отображения стрелок, но они не исчезли с мыши. Если вы пытаетесь сделать это исключительно с помощью css и не имеете скрытых изображений, вы должны использовать зависание.

Это подробно описано в этом сообщении: Используя только CSS, покажите div на hover над <a>

Таким образом, если вы спрячете стрелки, когда мышь покинет элемент списка, стрелки не останется, когда список соскользнет с страницы влево.

Ответ 3

из разметки, которую вы дали, похоже, что класс "скрытый" также возьмет с собой ваш "навигационный" div (он находится внутри sidenav) - я предполагаю, что это вызовет некоторые изворотливые

Как правило,

разметка содержимого
стиль вверх
добавьте взаимодействия (нажмите события и поведение)
THEN добавьте свои заключительные слайды взаимодействия (ослабление и т.д.)

(делая это, вы должны определить, какая часть вызывает проблему в ui)

Ответ 4

Иногда это работает: сделайте родительский position:relative похожим на версию webkit старой, то есть ошибки haslayout.

Ответ 5

Исправлено, удалив стиль z-index из родительского элемента и указав z-index выше 0 на фиксированный элемент. Надеюсь, это сработает с другими.