chrome中的一个transform的bug

今天看了张鑫旭的一篇淫荡的博文，心潮澎湃啊。立马本地试验了下，结果却遇到了chrome的一个蛋疼的bug。下面贴上代码

HTML:

 <div id="stage">
   <div id="container">
    <img src="/img/01.jpg" style="-moz-transform:rotateY(0deg) translateZ(195px); -webkit-transform:rotateY(0deg) translateZ(195px);" class="piece" />
    <img src="/img/02.jpg" style="-moz-transform:rotateY(40deg) translateZ(195px); -webkit-transform:rotateY(40deg) translateZ(195px);" class="piece" />
    <img src="/img/03.jpg" style="-moz-transform:rotateY(80deg) translateZ(195px); -webkit-transform:rotateY(80deg) translateZ(195px);" class="piece" />
    <img src="/img/04.jpg" style="-moz-transform:rotateY(120deg) translateZ(195px); -webkit-transform:rotateY(120deg) translateZ(195px);" class="piece" />
    <img src="/img/05.jpg" style="-moz-transform:rotateY(160deg) translateZ(195px); -webkit-transform:rotateY(160deg) translateZ(195px);" class="piece" />
    <img src="/img/06.jpg" style="-moz-transform:rotateY(200deg) translateZ(195px); -webkit-transform:rotateY(200deg) translateZ(195px);" class="piece" />
    <img src="/img/07.jpg" style="-moz-transform:rotateY(240deg) translateZ(195px); -webkit-transform:rotateY(240deg) translateZ(195px);" class="piece" />
    <img src="/img/08.jpg" style="-moz-transform:rotateY(280deg) translateZ(195px); -webkit-transform:rotateY(280deg) translateZ(195px);" class="piece" />
    <img src="/img/09.jpg" style="-moz-transform:rotateY(320deg) translateZ(195px); -webkit-transform:rotateY(320deg) translateZ(195px);" class="piece" />
   </div>
  </div>

 

stylus:

#stage
  width: 900px
  min-height: 100px
  perspective: 800px
  position: relative
  transition: top 0.5s

#container
  width: 128px
  height: 100px
  margin-left: -64px
  position: absolute
  left: 50%
  transition: transform 1s
  transform-style:preserve-3d

.piece
  width: 128px
  position:absolute
  bottom: 0
  transition: transform 1s

设置完后，我刷新了下页面，结果发现：

然后看看在firfox中能不能正常显示

nice,出来了。看来确实是chrome的bug了（ps：本机的chrome为21.0.1180.83 m），想想如果是bug，那这bug触发的条件是什么，有如何去避免呢。

当我在chrome dev tool 调整类piece的position属性时奇迹出现了，mm们都出现了。看来是重绘的作用。

那我何不在类piece中添加对每个图片对象进行绘制效果的属性,比如border-radius，border，box-shadow之类。

然后我在.piece中添加了box-shadow: 1px 0 10px #308000

.piece
  width: 128px
  position:absolute
  bottom: 0
  transition: transform 1s
  border-radius: 4px
  box-shadow: 1px 0 10px #308000 //新添加

最后刷新下页面，ok了。

 

有可能是chrome支持GPU不好，在使用GPU加速渲染css3出了个bug。而对于使用js动态插入的这类方法是不会出现这样的问题的。