CSS3 Transform имеет случайный г-индекс/глубины

Question

Возможно, я нашел ошибку в CSS3, или это просто ошибка ...

Вот страница я работаю: http://robocup2014.herokuapp.com/views/view/52e9bbb2e22d2402003d1ef1

I возможно, не сможет показать ошибку, потому что ее поведение абсолютно случайное ... Но вот что происходит:

Флаг должен быть ВСЕГДА за этим фиолетовым макетом. Тем не менее, это иногда сверху, иногда ниже. Иногда он сверху и идет ниже (без какого-либо кода, работающего на javascript), или, возможно, он выходит сверху, из ничего. Иногда, когда он оживляет, он находится ниже, а затем выходит на вершину в конце анимации, но позже он идет ниже.

Что я имею в виду: это СЛУЧАЙНО, и это скучная ошибка, без какой-либо картины. (Я подсчитал время, подсчитал итерации анимации ...).

Итак, кто-нибудь знает, как предотвратить это? Вот изображение, если в вашем окне это не ошибка. (Это происходит на Safari и Chrome)

Answer 1

Вы можете поделиться версии браузера с нами? Я не вижу его в последних версиях Chrome или Safari или Firefox.

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

Вы можете попробовать добавить это плоские предметы:

transform: translate3d(0,0,0);

Таким образом, все они будут рассматриваться в 3D-элементов и меньше шансов видя ошибку.

Кроме того, вы должны использовать все префиксы браузера. Я вообще не вижу преобразования в Firefox, поэтому я не могу сказать, является ли это проблемой в этом браузере.

Answer 2

Я не могу воспроизвести ошибку в Chrome, Safari или Firefox. я нашел подобный вопрос в StackOverflow, которые могут применяться к данному случаю (Complex Webkit Bug? Relative Position + Z-Index + Overflow Hidden + CSS3 Transform)

Я хотел бы предложить, хотя использовать некоторые Javascript перед обжигом скользящего события для того, чтобы вычислить Z-индекс и применять более высокое значение на " фиолетовые блоки "или даже вообще отказаться от CSS-переходов и использовать только Javascript-переходы.

Answer 3

Мне пришлось выяснить ту же проблему недавно, и решение transform: translate3d(0,0,0); не сработало для меня.

Дело в том, что z-индекс просто складывает элементы в 2D-мире, поэтому, поскольку вы используете 3D-преобразования, z-index не может применяться.

Таким образом, реальный вопрос ИМХО:

Как укладывать элементы в 3D-мире?

Ответ:

Используйте ось Z!

Это просто, но не интуитивно понятно из-за рендеринга браузера.Я сделал JSFiddle, чтобы попытаться проиллюстрировать его. Я старался максимально соответствовать вашей ситуации, что сложно, просто используя свой код на своей странице. В этой скрипке у вас есть четыре (2 на 2 строки) таких флажков. Я сделал еще 2 div (оценка), представляющий элемент, который должен быть над другими. Первая строка глючит, а вторая - нет.

Чтобы увидеть ошибку, вы можете просто переместить курсор над элементом, зная, что курсор - css pointer на флаге и css col-resize. Вы можете видеть, что когда вы наводите зеленый элемент слева направо, ваш курсор меняется.

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

Я думаю, что проблема теперь легче увидеть. Справа, зеленый элемент в синем, это то, что мы хотим. Но, слева, rotateY() заставил синий элемент «выйти из экрана», пропуская зеленый элемент. Смотрите этот вид «сверху», если это на самом деле не ясно:

Мы можем думать, что синий элемент выходит из экрана на половину его размера. Итак, решение, которое я нашел (я думаю, что это, вероятно, НЕ лучшее решение, но эта работа и кросс-браузер, поскольку вы используете собственные версии браузера transform, такие как -webkit-transform.

Прокрутите страницу до второй строки скрипка, наведите зеленый элемент и посмотрите, что курсор остается тем же, НО мы полностью потеряем курсор pointer над синим элементом. Я «просто» перевел синий элемент на оси Z на -10000px, чтобы быть уверенным, что он далеко Отметьте порядок, который здесь важен, сначала перевод translate3d(0, 0, -10000px), затем перспективу и, наконец, поворот, дающий ему: transform: translate3d(0, 0, -10000px) perspective(1200px) rotateY(-45deg);. Как вы можете видеть на моей последней схеме (от выше):

Синий элемент находится сейчас далеко и не проходит по зеленому. Последней проблемой, которую мы видим, является, является то, что если синий элемент больше 10000 пикселей, он снова перейдет через зеленый элемент.

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