CSS 3D变换在Chrome 16中随机工作

Question

9

我有一个非常奇怪的问题，CSS3D转换有时候有效，有时候无效。在升级到最新版本的Chrome之前，它总是有效的，但是在16版本中，它只随机有效。

更具体地说，似乎-webkit-perspective不生效，导致所有元素都为平面状态（尽管元素依然被转换）。在页面加载后更改Chrome的“firebug”中的透视角也不会影响任何内容。

有关该页面，请参见此处：http://exscale.se/__files/uploads/jquery-3d-circle.htm。我知道代码很多，但与3D转换相关的内容均在此CSS文件中：http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/CSS/jQuery.threeDCircle.scss 我的问题是：您是否遇到过与我的页面相同的问题，或者您自己曾经遇到过这个问题？如果是这样，您能想到任何可能引起它的原因吗？

我应该提到我正在使用Ubuntu 10.10和Chrome 16.0.912.63。

- powerbuoy

我在Mac上的Chrome 16.09或Safari中没有看到任何问题。也许这是Linux Chrome的问题？ - Scott

我在VirtualBox下的Windows中遇到了同样的问题。不过很奇怪的是，它是随机发生的。 - powerbuoy

同样的Chrome，但在Win7 x64上没有问题。另外要注意的是，这些动画只在快速的机器上才能看起来不错。我不得不在我的Lenovo X200上切换到最佳性能才能看到流畅的动画... - Jörn Berkefeld

嗨。我目前在Linux Chrome 16.0.912.63 beta上遇到了同样的问题。你找出问题了吗？ - enyo

我一直没有找出是什么原因导致的。最奇怪的是，有时候它可以正常工作，而代码中并没有任何改变。 - powerbuoy

3个回答

1

前往Chromium web SCM 接口，并检查您的 GPU 是否被列入黑名单。

还需前往 chrome://gpu/ 并检查 Chrome 是否报告启用了 3D CSS。

- Janus Troelsen

1

这里有个可能是问题所在的发现。当您使用该代码时

-webkit-perspective: 600px;

您需要将其放置在要影响的元素的父级中。如果它在实际元素中，它需要与变换结合使用，如下所示

-webkit-transform: perspective(600px) rotateY(45deg);

- CK Rock

1

我猜你没有读完整个帖子，因为如果你读了，你会注意到马库斯在大约6个月前找到了解决方案。 - powerbuoy

它帮助我解决了一个在3D卡片翻转时无法工作的FF问题。使用--moz-transform: perspective(600px) rotateY(45deg); - Lukas Oppermann

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markus · Accepted Answer

Chromium将您的GPU列入黑名单，拒绝执行任何3D CSS。

解决方案非常简单：在"chrome://flags"中打开"覆盖软件渲染列表"选项。