css z-index потерян после преобразования webkit translate3d

Question

У меня есть два абсолютно расположенных элемента div, которые перекрываются.Оба установили значения z-index через css.Я использую преобразование translate3d webkit, чтобы анимировать эти элементы с экрана, а затем снова на экран.После преобразования элементы больше не уважают свои установленные значения z-index.

Может кто-нибудь объяснить, что происходит с порядком z-index / stack элементов div, когда я выполняю преобразование webkit для них?И объясните, что я могу сделать, чтобы сохранить порядок стека элементов div?

Вот еще немного информации о том, как я выполняю преобразование.

Перед преобразованием каждый элемент получает этидва значения перехода webkit установлены через css (я использую jQuery для выполнения вызовов функции .css():

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

Затем элемент анимируется с использованием translate3d -webkit-transform:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

Кстати, я попытался установить 3-й параметр translate3d для нескольких различных значений, чтобы попытаться повторить порядок стеков в трехмерном пространстве, но не к счастью.

Кроме того, iPhone / iPad и Androidбраузеры - мой целевой браузер, на котором должен выполняться этот код. Оба поддерживают переходы webkit.

Answer 1

Это может быть связано с: https://bugs.webkit.org/show_bug.cgi?id=61824

В основном, когда вы применяете трехмерное преобразование к оси z, z-индекс больше не может быть учтен (вы сейчас находитесь в трехмерной плоскости рендеринга, используйте другие z-значения). Если вы хотите переключиться обратно на 2D-рендеринг для дочерних элементов, используйте transform-style: flat;.

Answer 2

Это наиболее определенно связано с ошибкой, отмеченной samy-delux.Это должно влиять только на любые элементы, которые позиционируются как абсолютные или относительные.Чтобы устранить проблему, вы можете применить следующую инструкцию css к каждому элементу, который расположен таким образом и вызывает проблемы:

-webkit-transform: translate3d(0,0,0);

Это применяет преобразование к элементу без фактического выполнения преобразования,но влияет на порядок рендеринга, поэтому он находится над элементом, вызывающим проблему.

Answer 3

Бит Поздно, но попробуйте добавить элементы, которые потеряли свой Z-индекс, поместив следующее, у меня недавно возникла проблема при выполнении некоторых параллаксов, и это очень помогло.

transform-style: preserve-3d;

Это экономит вклад

transform: translate3d(0,0,0);

На других элементах, которые увеличивают нагрузку на графический процессор

Answer 4

В ожидании примера

Вы пытались сделать масштаб преобразования (1)?Я помню, что у меня была похожая проблема, и мне пришлось изменить порядок элементов html и использовать преобразование, которое мне не нужно, только потому, что изменился z-индекс использования преобразования.

Если я не ошибаюсь, каждый раз, когда вы используете преобразование, оно становится самым высоким z-index из доступных, и оно упорядочено по ближайшему элементу html к началу тега.Так что снизу вверх.

Я надеюсь, что это поможет

Answer 5

z-index будет работать против трехмерных преобразованных элементов div, если стиль стекируемого элемента будет изменен на -webkit-transform: translateZ(0px);

Фрагмент на codepen -> http://codepen.io/mrmoje/pen/yLIul

В этом примере кнопки stack up и stack down поднимают и опускают z-индекс нижнего колонтитула (+/- 1) по отношению к повернутому элементу (в данном случае img).

Answer 6

Мне не удалось воспроизвести проблему, которую вы описали здесь.Независимо от того, что я делаю, значение z-index сохраняется во всех преобразованиях.Я тестирую с использованием Chromium (Google Chrome).

Третий аргумент функции translate3d манипулирует осью z элемента.Концепция похожа, но не совсем совпадает с z-index ... Элементы с более низкой осью z находятся под элементами с более высоким значением.

Я знаю, что вы опробовали значения третьего аргументачтобы соответствовать вашему предполагаемому z-индексу, но проблема в том, что ось z не меняется во время анимации CSS3.В следующем примере элемент hovered должен быть сверху, но #element_a остается сверху.

Если я добавлю z-index как к обычному селектору, так и к селектору: hover, он, похоже, будет работать и позволятьэлемент hovered должен быть самым верхним.

Хотя это не совсем то, что вы искали, такое поведение обеспечивает решение.Вам просто нужно использовать translate3d и z-index, чтобы установить порядок начального рендеринга.

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

Answer 7

Другим способом решения этой проблемы является то, что вы можете создать родительский элемент и применить все другие связанные с ним переходы:

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

JsFiddle