css - 谷歌浏览器无法在 3d 转换元素上应用不透明度过渡

Question

我有以下标记:

<div class="cube trigger cuberotate">
    <div class="face init f z"></div>
    <div class="face init l y"></div>
    <div class="face init b z"></div>
    <div class="face init r y"></div>
    <div class="face init u x"></div>
    <div class="face init d x"></div>
</div>

它类似于一个 3d 立方体，每个面都旋转并平移到适当的位置，我让立方体在面的父级上使用动画旋转。

这是它的相关CSS:

.cube {
  position: absolute;
  cursor: pointer;

  width: 120px;
  height: 120px;

  top: 0;
  left: 0;

  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.face {
  position: absolute;

  width: 120px;
  height: 120px;

  border: 0px solid #fff;
  background: #c82222;

  transform-origin: 50% 50%;

  opacity: 1;
  padding: 0px;

  -webkit-touch-callout: none;
  user-select: none;

  transition: all 0.5s ease-out;    
}

我想让立方体在文档准备好时一次出现一个面孔，所以我只是加入了一些 javascript，基本上是每 500 毫秒间隔一次，它简单地删除了覆盖 的 .init 类>opacity: 1 .face 类的值。

(function($) {
  'use strict';

  // Some selectors and shit...
  var $face = $('.face').first(),
      speed = 500,
      timer = null;

  $(document).ready(function(){
    // Start showing faces
    timer = window.setInterval(function(){
      var $next = $face.next();

      $face.removeClass('init');

      if(!$next.hasClass('face')) {
        window.clearInterval(timer);
      }

      $face = $next;
    }, speed);

  });


})(jQuery);


// And the additional CSS below
.face.init {
  opacity: 0;
}

在理想情况下，这段代码应该可以工作，但是我在 Google Chrome 上遇到了一个问题，在类被删除后不透明度不会转换回 1，从而使立方体完全不可见。如果您右键单击并检查它会再次可见。

奇怪的是，在 Safari 上，这也是一个基于 webkit 的浏览器，这根本不会发生，而且面孔会按预期显示一次。

我尝试使用 jquery 中的 .animate() 并且还尝试了 jquery 插件 transit

• 现在，Safari 和 Chrome 的行为方式不应该相同，或者尽管呈现引擎相同，但在底层是否存在重大差异？
• 是我做错了什么吗？
• 有解决办法吗？

这是我的笔: http://codepen.io/luigimannoni/pen/FstKG/

谢谢

更新:

我已经在我的 Mac 上的 Chrome 和 Windows 7 上进行了明显的尝试，它们的行为方式相同(也有不同的机器)

还尝试了 Firefox，它像 Safari 一样无缝工作，除了没有发生旋转动画(但我没有考虑 Firefox，因为它是不同的浏览器)。

额外更新:

移动设备(包括 iOS 和 Android)上的 Chrome 在桌面上的工作和行为类似于 Safari。

另一个更新:

经过反复尝试，我发现这可能是浏览器错误，Chrome Canary 可以正常工作。 我在 facebook 上发布了这个，我从开发人员那里得到了一些很好的解决方法，我发现它们很有创意。

第一个涉及的有一个 rgba() 背景色，并改变 alpha 而不是在不透明度上进行过渡:http://codepen.io/anon/pen/IjsBL

第二个涉及一些 javascript 编码，强制浏览器在每一帧重绘面部:http://codepen.io/anon/pen/Hofzb

我开始悬赏，看看 stackoverflow 能在这里做什么!

Answer 1

您可以尝试将 0.01 分配给 opacity。

.face.init {
  opacity: 0.01;
}