Chrome CSS3 3D转换错误 [英] Chrome CSS3 3D Transform bug

问题描述

我有css在3d空间中的元素上做卡片翻转。它的工作原理伟大，除非你向上和向下滚动页面，你随机获得白色的元素显示在页面上的某些地方在Chrome。我在Facebook标签中附加了一个图片作为例子。在镀铬窗口中，白色的盒子有时会掩盖内容。当我注释掉3d变换css，这不会发生。这是一个小提琴（

I've got css to do a card flip on a element in 3d space. It works great except for when you scroll up and down the page you randomly get white elements displaying on the page at certain places in Chrome. I've attached an image as an example inside a facebook tab. In chrome windows, the white "boxes" cover up content on occasion. When I comment out the 3d transform css, this doesn't occur. Here is a fiddle (http://jsfiddle.net/derekaug/QSEvs/) of the css that does the 3d stuff. Unfortunately, I can't link to the actual tab yet as it's not public.

解决方案

I have a problem like this before, not saying that it will work for sure but how I fixed it is removing all the transform css properties from the elements when they are not been used.

This is, only apply transform properties while the animation is on. This would mean in your example creating 2 classes one for each animation with all the transform properties, removing the ones on the base classes. Then on click apply the appropiate class and as soon as the transformation is over remove the class. There is a javascript callback that is fired on the elements when the transition is over that would let you remove the class:

CSS3 transition events

这篇关于Chrome CSS3 3D转换错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！