未分类

解决低版本安卓系统中webview对css的background写法不兼容问题

追梦追梦 未分类 2017-08-24
1282 0

背景

对接第三方app的时候发现内嵌网页里面的背景图死活出不来，但是在同一个手机上的微信自带浏览器确是正常的，通过各种尝试终于发现问题，记录一下。

对方使用的方式是app里面内嵌一个webview加载我方的手机端页面，这个页面在大部分流行的安卓机器上都使用正常，没有出现过大的样式偏差，但是一放进app里面样式就出现了问题。具体表现是一个div容器的背景图出现不了，背景颜色也没有了。

分析

首先把原来的代码贴出来

PHP
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这个样式，测试发现问题依旧。

我开始怀疑是网络加载慢导致的背景图加载不出来。直接去掉背景图，背景颜色居然神奇的出现了，代码变成了这样

PHP
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%;

真是诡异，正常情况下不应该，难道是因为缩写导致的？

怀着无比怀疑的心态把上面那段简写全部拆写成完整版，代码如下

PHP
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浏览器内核，优化过这个问题。

原文链接:https://www.92ez.com/?action=show&id=23451

赞(0)
赏

本文由 安全周 作者：追梦 发表，转载请注明来源！

追梦

追梦

 文章：98

相关文章

热评文章

发表评论

用户登录