瀚海沙

        今天在调试微信大转盘的活动页面时发现一个问题，就是在PC端预览页面时，指针都在最上面，是正常显示，而在手机端进行浏览时，指针一下在转盘页面下面，一下在转盘页面上面。看到这个现象第一个想到的可能原因就是z-index的问题。于是，设置了指针z-index为999，转盘的z-index为0，但是仍然不起作用。

        经过查证资料发现在使用CSS3做动画时 层级会被默认提高，保证在可见层级上。 如遇到不作动画的元素需要覆盖在上面 我经常都是加个-webkit-transform:translateZ(0)。

        首先，看下原来页面的html代码，我们可以看到很简单，就是img为指针，canvas为转盘的描绘。

<div class="banner">
 <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%; ">
 <img class="pointer" src="images/turnplate-pointer.png"/>
 <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
 </div>
</div>     

        因为canvas部分为动画描述部分，所以在img也就是指针这里需要添加一段代码：style="-webkit-transform:translateZ(0); postion:absolute; z-index:9999;"然后在canvas这里添加style=" z-index:0;"。

        于是这个代码就变成了下面这个样子。

<div class="banner">
 <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%; ">
 <img class="pointer" src="images/turnplate-pointer.png" style="-webkit-transform:translateZ(0); postion:absolute; z-index:9999;"/>
 <canvas class="item" id="wheelcanvas" width="422px" height="422px" style=" z-index:0;"></canvas>
 </div>
</div>

        手机里测试后，指针忽闪忽现的问题没了，这个问题就解决了。

        大转盘源码下载：http://hanhaisha.com/file/2015/11/27/20151127161028952.rar