app 中的webview控件与终端浏览器的内核不一致

ThinkMake 2016-07-18

这两天做了一个“砸金蛋”的效果

http://git.oschina.net/hbiao68/bomb_egg

从点击选择砸的蛋,到锤子砸蛋,到蛋碎裂,最后从蛋中显示代金券一系列动作自动完成。

问题:

在PC浏览器、android 和  iphone手机浏览器中显示全部正常,但是将其运行到app的webview控件中显示,却没有“锤子砸”的效果?

问题分析:

锤子砸的效果是使用的CSS3,transform:rotate(-5deg);

因为认为移动端的浏览器支持CSS3的效果已经很好了,所以就没有使用-webkit-transform

由于app中的webview还是与PC和手机浏览器中的内核有一定的差异(例如为了兼容更早期版本的浏览器,舍弃了一些高级更消耗资源的动画效果),导致对相同的代码,在浏览器中显示OK,却在webveiw中显示不正常

<div class="absolute width_33" style="top:-7%;right: 7%;-webkit-transform:rotate(-5deg);transform:rotate(-5deg);" id="hammerContainer">

相关推荐