android - Chromium 51 和 Chromium 51 WebView 之间不一致的背景大小速记行为

Question

我在我们的应用程序中遇到了奇怪的行为，这是一个在 Android 上运行的 Phonegap 包装的 WebView。我不确定我是在查看错误还是可能有其他原因，因此提出了这个问题。

大约从 2013 年开始，对于 Chromium，background CSS 属性也可以包含 background-size 的简写定义，由 / 分隔。

例如:背景:绿色 url(../img/hk.svg) center center/100% auto

在 UA Chrome/51.0.2704.81 上测试过，此语法在适用于 Android 的 Chrome 浏览器中显然运行良好。由于 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 移动版 Safari/537.36

Test case for Chrome browser - 代码笔
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 才能正确呈现，而两者都应该。

谢谢!

Answer 1

我分解了您发布的 APK 文件并将您的源代码复制到我新创建的 cordova 元素中。我构建了我的元素并在运行 Android Marshmallow 的设备上进行了测试。它工作正常。请查找 screenshot结果也是如此。

还在我的github page中添加了示例元素.请您查看它并从中生成 APK，因为这可能是您的元素设置的问题。我正在使用 cordova 版本 6.2.0 和 Cordova Android 版本 5.1.1

我还遇到了其他 link其中规定在使用背景大小速记之前必须指定位置 (0%)。您可以在设置中尝试一次该选项。希望对你有帮助