Проблема мерцания/рендеринга с -webkit-transform

У меня возникла странная проблема с -webkit-transform. Если я использую perspective и rotateX, чтобы сделать элемент «перевернутым», если элемент достаточно высокий, он мерцает или вообще не отображается за определенным углом.

Я создал демонстрацию jsFiddle, которая иллюстрирует проблему. Двигайте мышью влево и вправо, чтобы повернуть прямоугольник.

  • Когда элемент имеет высоту 400 пикселей, все работает нормально.

  • Нажмите «4000», чтобы увеличить высоту элемента до 4000 пикселей. Текст перестает обновляться в определенном диапазоне, и рендеринг мерцает.

  • Нажмите «40000», чтобы увеличить высоту элемента до 40000 пикселей. Он хорошо отображается под небольшими углами, но полностью исчезает при угле в 80 градусов.

Что тут происходит? Есть ли обходной путь или я должен зарегистрировать ошибку WebKit?

(Примечание. Я вижу такое поведение как в Safari, так и в Chrome на OS X.)


css css-transforms webkit
person jtbandes    schedule 18.04.2012    source источник
comment
Выглядит отлично в Chrome в Windows, если только я не использую скрипку неправильно.   -  person nhinkle    schedule 18.04.2012

Ответы (1)


arrow_upward
3
arrow_downward

Проблема с этим кодом в свойстве CSS3 perspective. Когда элемент имеет высоту 4000 пикселей или более, он исчезает, когда он приближается к экрану, потому что он находится всего в 500 пикселях (определено свойством perspective).
Там, если элемент выше, элемент должен быть дальше.

Я сделал несколько операторов if, чтобы получить разные перспективы в зависимости от высоты элементов:

if (document.getElementById("m2").offsetHeight == 400) {
    document.getElementById("m2").style.webkitTransform = "perspective(500) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 4000) {
    document.getElementById("m2").style.webkitTransform = "perspective(5000) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 40000) {
    document.getElementById("m2").style.webkitTransform = "perspective(50000) rotateX(" + (e.clientX / 5) + "deg)";
}
person Daniel    schedule 18.04.2012
comment
Я проверю это позже, но при быстром тесте кажется, что все еще немного мерцает (хотя и не так плохо!). Но, конечно, это сильно меняет визуальный эффект. Есть ли способ сделать что-то подобное, не меняя воспринимаемую перспективу? - person jtbandes; 18.04.2012
comment
Когда мерцает? Это когда #m2 большой и его угол приближается к 90 градусам? - person Daniel; 19.04.2012
comment
Ага. Вот видео, которое показывает то, что я вижу — я записал и исходную версию, и вашу версию. - person jtbandes; 19.04.2012
comment
Хм, кажется, проблема только в Safari. Он также мерцает в моем Safari, но не в Chrome. Я посмотрю его чуть позже. - person Daniel; 19.04.2012