开发微站时发现一个bug,在小米1s的微信webview里面,当元素被设为position:fixed时,z-index有时候会失效。

测试了一下,发现是因为有些元素使用了-webkit-animation。

这是怎么一回事呢?当两个元素都设为position:fixed时,再给他们设z-index,这时,层级就不是按照正常的大者为上了。

而是先看看谁有-webkit-animation这个属性,哪个有就哪个为上。如果两个都有,这是才以正常层级划分。

先别急,除了是否有-webkit-animation这个属性之外,里面必须有渐变属性

@-webkit-keyframes name{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}

像上面的代码,虽然从0%-100%都没有变化,可是却不能省掉,不然就当做没有-webkit-animation属性一样,沉下去了。

  2 Responses to “微信webview里position:fixed时z-index有时候会失效”

  1. 这个是因为做CSS3动画时 层级会被默认提高,保证在可见层级上。 如遇到不作动画的元素需要覆盖在上面 我经常都是加个-webkit-transform:translateZ(0)

Leave a Reply to zhy Cancel reply

(required)

(required)

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

   
© 2012 Hedgehog Suffusion theme by Sayontan Sinha