【发布时间】：2016-07-14 13:54:47
【问题描述】：
我在我们的应用程序中遇到了奇怪的行为，这是一个在 Android 上运行的 Phonegap 包装的 WebView。我不确定我是否正在查看错误或可能有其他原因，因此提出了这个问题。
大约从 2013 年开始，对于 Chromium，background CSS 属性还可以包含 background-size 的简写定义，由 / 分隔。
例如：background: green url(../img/hk.svg) center center / 100% auto
此语法在 Android 版 Chrome 浏览器中运行良好，在 UA Chrome/51.0.2704.81 上进行了测试。由于 KitKat，系统中的 Chromium 内核也用于 WebView 而不是普通浏览器，因此我们的 Phonegap 应用程序使用与 Chrome 应用程序完全相同的渲染内核 (Chrome/51.0.2704.81)。
但是，background-size 简写在 WebView 变体中不起作用。在开发工具中，语法显示为正确，但表现为background 字符串中的background-size 定义不存在。如果之后显式设置了background-size，问题就解决了。
下面，我提供了一个包含的小 .apk，您可以使用它通过 Chrome 中的设备检查进行调试来测试此行为。
完整的 UA Chrome 字符串：Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MOB30D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.81 Mobile Safari/537.36
完整的 UA Chrome WV 字符串：Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MOB30D; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.81 Mobile Safari/537.36
Test case for Chrome browser - codepen
Test case APK for Android - 最小的 Phonegap Hello World 包装器，没有请求权限
APK 使用以下相关的 HTML/CSS：
<div class="block"></div>
<div class="block extended"></div>
.block { background: green url(../img/hk.svg) center center / 100% auto; }
.extended { background-size: 100% auto; }
如您所见，只有 .extended 类的 div 才能正确渲染，而两者都应该正确渲染。
谢谢！
【问题讨论】：
-
我在设备中安装了apk。已在此处附上应用程序页面的屏幕截图 - imgur.com/f8L2gNN 不确定您在这里提到的问题到底是什么。能给我介绍一下吗？
-
嗨@Gandhi，问题是两个图像实际上具有相同的CSS - 第一个背景使用简写
background和背景大小定义，第二个使用独立的background-size属性在定义background之后。两者都应该渲染得很好。第一个背景在 WebView 中无法正确渲染，但在同一核心版本的 Chrome Android 中却可以正确渲染。 -
@Gandhi 我已将您在 APK 中看到的确切 HTML/CSS 添加到问题中。
标签： android css cordova webview chromium