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>

它类似于一个三维立方体，每个面都旋转并转换到它们的正确位置，我让立方体在面部的父级上使用动画旋转。

这是相关的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上以及Windows 7上的Chrome上都尝试过，它们的行为方式相同（不同的机器也是如此）

除了旋转动画之外，还尝试了像Safari一样无缝工作的Firefox（但我不考虑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;
}

Answer 2

看起来像是documented regression bug

对于Safari和Chrome的差异，您应该知道自版本28以来，Chrome使用Blink（ webkit fork ）作为其渲染引擎。

Answer 3

这个问题在Facebook上引起了我的注意。根据要求，我会发布我最初的思考过程。

初步思考：积极的GPU使用/硬件加速

最初，我认为Chrome正在看关键帧中的3D变换 - 动画和硬件加速动画 - 这正是我们所期望的 - 但是当试图通过JavaScript进行干涉时，并没有中断GPU执行。

解决方法1：

首先使用单独的关键帧动画来同时为不透明度和旋转设置动画，然后启动当前动画，让旋转动画无限延续。

请参阅此codepen。

解决方法2：

然后我立刻意识到他希望每张脸都按顺序独立淡入。知道javascript没有打断CSS动画，我尝试使用关键帧动画动画.face。使用animation-delay错开每个面孔。

见codepen。但出于某种原因，它在第一张脸后停止:(

解决方法3：

此时我抓着吸管，并想在perspective: 500px回调中切换perspective: 501px到requestAnimationFrame，希望它会破坏硬件加速，但没有运气。

解决方法3.1：

但是在使用了requestAnimationFrame后，我决定只使用javascript执行第一次旋转和预期的淡入淡出然后触发CSS动画。

见codepen。这是预期的视觉效果。

解决方法4：

虽然其他任何人都会完成并且拂去灰尘，但仍然使用javascript让我陷入困境 - 就像我喜欢JS一样，CSS也更顺畅（现在）。

然后它打了我！我可以动画background-color: rgba(...);而不是opacity: ...;。

最后，我使用纯CSS制作了预期的动画。

请参阅此codepen。

这是基于解决方法2 。我必须创建3个额外的动画：每个颜色.face一个用类.x，.y和.z标识。

我使用SCSS清楚地表明我使用的是原始颜色（因此rgba(#c82222,0);），并且还为自己保留了无论如何必须将其转换为RGB值的麻烦。

希望能帮助任何人：）

Answer 4

请尝试使用更多转换值从零开始不透明度。

Answer 5

CSS位置相对修复了问题：

.fullscreen {
  position: relative;

http://codepen.io/anon/pen/oekyt

它让我想起旧的IE错误然后你必须设置

*zoom: 1;

表示元素。它使元素“真正呈现”，而不仅仅是“光渲染”。

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

5 个答案: