Видимость видимости Webkit не работает

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

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

Вот код, если я делаю что-то ужасное плохое

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Card Flip Using CSS</title>
    <style type="text/css">
        body {
            background-color: #3d994a;
        }
        h1 {
            font-size: 30pt;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            display: block;
            text-shadow: 1px -1px 0px #4E4E4E;
        }
        #container { 
            -webkit-perspective: 1000; 
        }
        .card {
            position: relative;
            width: 286px;
            height: 392px;
            -webkit-transform-style: preserve-3d;           
            -webkit-transition: all 0.5s linear;           
        }   
        #container:hover .card{
            -webkit-transform: rotateY(180deg);
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            border-radius: 20px;    
            border:1px solid #eee;
            background-color: #FFF;
            box-shadow: #000 3px 2px 4px;
        }
        .back {
            -webkit-transform:rotateY(180deg);  
        }
    </style>
</head>

<body>
    <h1>Hover over the card to flip it</h1>
    <div id="container">
        <div class="card">
            <div class="front face">            
                <img src="images/back.png" alt="" />
            </div>
            <div class="back face">
                <img src="images/front.png" alt="" />
            </div>      
        </div>
    </div>
</body>
</html>

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

Ответ 1

У меня была аналогичная проблема с дочерними элементами такого элемента, когда у ребенка был 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 */
}

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Это зафиксировало это:

Откройте редактор флагов Chrome через этот URL:
```
  chrome://flags/
```
Включите следующую настройку:

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

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

Ответ 6

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

Ответ 7

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

Проверить http://amproductions.org

Ответ 8

У меня возникает та же проблема, когда я пытаюсь перевернуть мою карту, содержимое обратной стороны видно на лицевой стороне. Затем я узнал, что backface-visibility: hidden будет работать до тех пор, пока мы не используем -webkit-transform-style:"preserve-3d" или transform-style: preserve-3d; основанный на совместимости. Но теперь у меня есть проблема, что текст загружается для первого щелчка, а для остальных он работает отлично!