Позиция мобильного сафари: фиксированный сбой z-index при прокрутке

Я знаю, что iPhone не поддерживает позицию: исправлено, но теперь это происходит, и я вижу странный сбой при прокрутке элемента фиксированной позиции за другими элементами с более высоким индексом z. Элемент фиксированных позиций с нижним z-индексом на мгновение появляется спереди, что выглядит очень плохо. Есть ли способ предотвратить это?

Я попытался добавить -webkit-transform: translate3d(0, 0, 0); к фиксированному элементу и, похоже, не поможет этой проблеме.

Вот и jsfiddle.

Обновление Я добавил transform:translateZ(x) в дополнение к z-индексу и не устранил проблему.

Update2 Я добавил префикс -webkit, и это исправляет проблему z-index на мобильном Safari, но также приводит к тому, что позиция: исправлена некорректная работа на настольном Chrome.

Ответы

Ответ 1

z-index не является надежным с позицией: исправлено, как показано в этой скрипте: http://jsfiddle.net/mZMkE/2/ вместо этого использовать translateZ.

transform:translateZ(1px);

на элементах вашей страницы.

EDIT: В вашем коде, Добавьте этот css:

.bla, .projects, .contact  {
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);
}

а затем удалите z-index ref из этих элементов и .intro.

Ответ 2

Обновление 1: я добавил transform:translateZ(x) в дополнение к z-index и это не решило проблему.

Обновление 2: я добавил префикс -webkit- и это исправляет проблему z-index в мобильном Safari, но также приводит к некорректной работе position:fixed в настольном Chrome. "

Затем попробуйте обернуть -webkit-transform:translateZ(x) в конкретный мобильный медиа-запрос.
Например:

@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
    .whatever {
        -webkit-transform: translateZ(x)
    }
}

Так что в этом случае он не будет ничего делать на настольном Chrome

Ответ 3

Я не сторонник этого решения, но это лучшее, что у меня есть на данный момент...

Чтобы воспроизвести эффект z-индекса с фиксированной позицией на iPhone, кажется, что требуется два метода вместе:

Как было предложено @tnt выше, используйте transform:translateZ(n), где z-index используется для того, чтобы мобильное сафари правильно обрабатывало порядок стека. У этого, похоже, есть неудачный побочный эффект, вызывающий положение: фиксированный, чтобы прекратить работать...
Вместо позиции: исправлено, используйте технику javascript как это, чтобы подделать ее.

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

Ответ 4

Я попробовал решение, принятое в качестве ответа в конкретном случае, когда мне нужно было установить другую позицию в стеке разных уровней, но это само по себе не работало как в настольных браузерах (firefox и chrome), так и в Safari iOS

Я вышел с этим взломом, который использует оба translateZ и z-index для каждого div, который работает на этих платформах. Важен порядок перевода Z и z-индекса. Для установки положения каждого слоя

-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative; 
z-index: 1;

Я использовал то же значение для z-индекса и транслировал Z только для согласованности, это не обязательно. См. Рабочий пример http://jsbin.com/peyehufo/5