Welcome, Old Sport!

CSS3 translate3d在android里的应用

by ilikecss ON 2014/05/14 5490

解决z-index不支持安卓4.0下版方法Translate3d是CSS3的一个新的css属性,由于浏览器支持率较低,一般主要应用在iOS和android上。我对着个属性还没有完全认识和太多实践应用,只是最近在工作上测试android平板时遇到问题后在这里和大家分享。

测试android系统很老旧4.0的版本,要求使用默认自带浏览器(internet图标那个),查看了下核心是Safari的,这个浏览器比IE6还差劲,很难调试。

工作中网页加载了jQuery ui,使用了它原生的Dialog弹出效果,支持所有大众浏览器,然而就是在这个android默认浏览器下弹出的popup窗口是灰暗。(以下Demo模仿平板里的效果)

我在Web里查看了背景遮照层”ui-widget-overlay”的z-index值是低于弹出窗口的值,照理说应该是高亮状态的。(以下Demo模仿平板里的效果)

总结原因,z-index没起效果,网上关于android设备的文章也不是很多,整了好长时间才在google里搜到一论坛里在讨论类似问题,见评论有一老外建议使用translate3d尝试,果然Fixed! 在所对应的层级里添加以下CSS即可:

-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

PS: 该情况未在android4.0以上版本测试,我参照android论坛上的说法,最新版本已经修复和对应z-index。

3条评论
  1. #1

    大发说道:

    主要可以省去页面重绘,动画流畅

  2. #2

    Silk Pajamas说道:

    以后手机版的网站会越来越受欢迎




TOP