css – Google Chrome无法在3d转换的元素上应用不透明度转换

我有以下标记：

<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,基本上是每隔500ms的一个间隔,它只是删除.init类,它覆盖了.face类上的opacity：1值.

(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;
}

在一个理想的世界这个代码应该工作,但是我在谷歌浏览器面临一个问题,透明度不会转换回1,类删除后,立方体完全不可见.如果您右键单击并检查它将再次可见.

好奇地在Safari上,这也是一个基于webkit的浏览器,这根本就不会发生,面孔上显示一个,因为他们应该做的.

我尝试使用来自jquery的.animate(),并尝试使用jquery插件transit

>现在,Safari和Chrome不应该以同样的方式表现,或者尽管渲染引擎是一样的,但是在引擎罩下存在重大差异？
这是我做错了吗？
有一个解决方法吗？

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

谢谢

更新：

我已经在Chrome上显示了我的Mac,也在Windows 7上,他们都以同样的方式(不同的机器)

还尝试了Firefox,它与Safari不同之处在于它与Safari没有任何转动的动画无关(但是我将Firefox不再考虑,因为它是不同的浏览器).

附加更新：

移动设备上的Chrome(包括iOS和Android)都在桌面上运行和运行像Safari.

另一个更新：

在周围玩耍之后,我发现可能是浏览器错误,Chrome Canary可以正常工作.
我在Facebook上发布了这个,我从开发人员那里得到了几个很好的解决方法,我觉得这很有创意.

第一个涉及到一个rgba()背景颜色,并使alpha更改,而不是对不透明度进行转换：http://codepen.io/anon/pen/IjsBL

第二个涉及到一些JavaScript编码,强制浏览器在每个框架上重新绘制面部：http://codepen.io/anon/pen/Hofzb

我开始一个赏金,看看什么stackoverflow可以做到这里！

解决方法

您可以尝试将0.01分配给不透明度.

.face.init {
  opacity: 0.01;
}

原文地址：https://www.jb51.cc/css/214552.html