对接第三方app的时候发现内嵌网页里面的背景图死活出不来,但是在同一个手机上的微信自带浏览器确是正常的,通过各种尝试终于发现问题,记录一下。
对方使用的方式是app里面内嵌一个webview加载我方的手机端页面,这个页面在大部分流行的安卓机器上都使用正常,没有出现过大的样式偏差,但是一放进app里面样式就出现了问题。具体表现是一个div容器的背景图出现不了,背景颜色也没有了。
首先把原来的代码贴出来
1 2 3 4 5 6 7 8 |
background: #e3e3e3 url("../img/loading.gif") no-repeat center center / 70px auto; display: block; position: fixed; top: 0; left: 0; z-index: 50001; width: 100%; height: 100%; |
通过排除法首先去掉这个div容器position的fixed,因为fixed出现过很多不兼容问题,我首先想到的就是这个问题,直接删掉position这个样式,测试发现问题依旧。
我开始怀疑是网络加载慢导致的背景图加载不出来。直接去掉背景图,背景颜色居然神奇的出现了,代码变成了这样
1 2 3 4 5 6 7 8 |
background: #e3e3e3; display: block; position: fixed; top: 0; eft: 0; z-index: 50001; width: 100%; height: 100%; |
真是诡异,正常情况下不应该,难道是因为缩写导致的?
怀着无比怀疑的心态把上面那段简写全部拆写成完整版,代码如下
1 2 3 4 5 6 7 8 9 10 11 |
background-color: #e3e3e3; background-image: url('../img/loading.gif'); background-repeat: no-repeat; background-position: center center; background-size: 70px auto; display: block; position: absolute; top: 0;left: 0; z-index: 50001; width: 100%; height: 100%; |
测试发现问题居然神奇的解决了。
推测是低版本安卓系统里面调用系统自带浏览器作为webview的时候对css的一些简写写法不支持,导致无法正常渲染,新版本安卓系统已经修复这个问题,之所以微信中没有出现bug大概是因为微信内置的是自家的QQ浏览器内核,优化过这个问题。
本文由 安全周 作者:追梦 发表,转载请注明来源!
您必须[登录] 才能发表留言!