в CSS Z-индекса потеряли после того, как в WebKit-преобразования translate3d

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

может ли кто-нибудь объяснить, что происходит с Z-индексом / стековым порядком элементов 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 к нескольким различным значениям, чтобы попытаться реплицировать порядок стека в 3d пространство, но не повезло.

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

7 84
css monad-transformers webkit

7 ответов:

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

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

46

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

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

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

41

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

transform-style: preserve-3d;

Это экономит ставишь

transform: translate3d(0,0,0);

на другие элементы, которые ставят больше нагрузки на GPU

11

ждем, чтобы увидеть пример

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

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

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

7

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

сниппет на codepen ->http://codepen.io/mrmoje/pen/yLIul

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

5

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

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

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

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

хотя это не совсем то, что вы ищете, это поведение обеспечивает решение. Вам просто нужно используйте 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>
3

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

# 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

0