Css 动画在 Google Chrome Flipclock 中不工作

Question

我的翻转时钟动画在 Firefox 和 IE 中运行良好，但在 Google Chrome.

中不起作用

HTML

<div id="tempFlipClock" data-position="LeftContent">
    <div id="FlipClockContainer" class="animated" data-dbitm='ClockContainer'>
        <div class="container">
            <ul class="flip hoursPlay">
                <li>
                    <a>
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a>
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="flip minutesPlay">
                <li>
                    <a>
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a>
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="flip smallsize dnPlay">
                <li>
                    <a>
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                    </a>
                </li>
                <li>
                    <a>
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn"></div>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="clsServerDate">
                <span id="serverdate"></span>
            </div>
        </div>
    </div>
</div>

我把叉子放在这里... [PS]:http://codepen.io/anon/pen/WQxREV

它可以在 firefox 上工作，但不能 chrome...在 chrome 中只显示白页..这发生在 chrome 禁用 flash 的更新之后..

Answer 1

看来你的 perspective 是这里的罪魁祸首。我已将您的 CSS 更改为：

旧CSS:

ul.flip li a { 
   height: 100%;
  -webkit-perspective: 200px; 
  -moz-perspective: 200px; 
   perspective: 200px;
 }

新 CSS:

ul.flip li a { 
   height: 100%; 
   width: 100%; 
   display: inline-block; 
   /* -webkit-perspective: 200px; 
      -moz-perspective: 200px; 
       perspective: 200px; */ 
   }

如您所见，我已经为 ul.flip li a 注释掉了您的 perspective，现在它对 Chrome 都可以正常工作作为 FF.

希望它能帮到你 :)