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

标签 android css cordova webview chromium

我在我们的应用程序中遇到了奇怪的行为,这是一个在 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 才能正确呈现,而两者都应该。

谢谢!

最佳答案

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

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

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

关于android - Chromium 51 和 Chromium 51 WebView 之间不一致的背景大小速记行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38376169/

相关文章:

android - 失败 [INSTALL_FAILED_USER_RESTRICTED : Invalid apk] in android

css:将 div 元素放在另一个 div(底部)旁边的正确方法(如果它们不在一起)

javascript - 无法弄清楚为什么我的文字没有变成绿色

html - 如何在不覆盖周围元素的情况下使子div比其父div宽

ios - meteor ( react ):iOS应用程序进入后台(后台运行实例)时所有图像消失

ios - cordova[phonegap] 设置启动画面在 ios 中无法正常工作

jquery - 显示来自网络服务的数据

android - Google Fit API 在内部测试中不起作用

java - 上下文菜单可以打开 ImageView 吗?

android - 开始 BlackBerry 应用程序开发