Видимость задней стороны Webkit не работает

Question

Я строю простой пример переворачивания карты с помощью свойства -webkit-transform: rotateY.

Пару дней назад все работало нормально, но вдруг перестало работать.Эффект все еще работает, но когда я наведу курсор на карту, передняя сторона должна исчезнуть, чтобы сделать заднюю сторону видимой.для этого я использую свойство -webkit-backface-visibility: hidden.Но похоже, что он больше не работает в chrome (как в стабильной, так и в ночной сборочной версии)

Вот код на случай, если я делаю что-то ужасное плохопришел к такому выводу, потому что я сделал пару простых примеров, используя только повернутый div с простым текстом, скрытым свойством backface, и он все еще был виден.Кроме того, этот пример использует это свойство и также перестал работать.Итак, подводя итог, у меня вопрос: есть ли у кого-то еще проблемы с этим свойством или есть проблема с моим кодом?

Answer 1

Просто поставьте это -webkit-transform:rotateY(0deg);, вам нужно указать браузеру, какая передняя панель будет первой.

Answer 2

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

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

Так что решение также должно использовать:

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}

Answer 3

Если вы протестировали все остальные варианты здесь и ничего не работало, пока этот пример работает в вашем браузере, убедитесь, что элемент, соответствующий #card из приведенного ниже примера, имеет overflow:visible:

<div id="container">
    <div class="card">
        <div class="front face"></div>
        <div class="back face"></div>      
    </div>
</div>

Answer 4

Интересно, что если вы установите непрозрачность на значение, отличное от 1 (скажем, 0,99), внезапно появится видимость задней поверхности.

Answer 5

Я сталкивался с этой проблемой в нескольких версиях Chrome в Windows XP, включая Chrome 24.

Это исправлено:

1. Открыть редактор флагов Chrome через этоURL:

     chrome://flags/
   

2. Включить следующую настройку:

   Переопределить список рендеринга программного обеспечения Переопределяет список рендеринга встроенного программного обеспечения и включает ускорение GPU в неподдерживаемых конфигурациях системы.

3. убедитесь, что ускоренные CSS-анимации включены.

Тот факт, что это решило проблему, говорит о том, что Chrome считает мою систему «неподдерживаемой системой».Таким образом, ваш пробег может варьироваться в зависимости от впечатлений Chrome от вашей системы.

Answer 6

Я где-то читал, что это связано с мощностью графического процессора хост-компьютера. Это работает для меня на каждом устройстве, которое имеет приличный графический процессор. Доказательством этого является тот факт, что он не работает для меня на Dell Mini, даже после установки Fresh OS (win8) и на старой машине с XP. Проблема в том, что задняя сторона видимости есть, но не вызывается, что означает, что я не могу использовать javascript для обнаружения этого.

Проверка на http://amproductions.org

Answer 7

Кажется, что это не совсем стабильно на Mac, я оставил Chrome на пару часов с работающей страницей анимации, а когда вернулся, видимость просто перестала работать.Перезапуск Chrome помог решить проблему.