0

I have encountered strange behavior in our application, which is a Phonegap wrapped WebView running on Android. I'm not sure if I'm looking at a bug or there could be other causes, hence this question.

Roughly since 2013 for Chromium, the background CSS property can also contain the shorthand definition of background-size, separated by /.

Ex: background: green url(../img/hk.svg) center center / 100% auto

This syntax works obviously well in the Chrome browser for Android, tested on UA Chrome/51.0.2704.81. Since KitKat, the Chromium core present in the system is also used for WebView instead of the stock browser, so our Phonegap application uses the exact same rendering core (Chrome/51.0.2704.81) as the Chrome application.

However, the background-size shorthand does not work in the WebView variant. In dev tools, the syntax is shown as correct, but behaves as if the background-size definition in the background string didn't exist. If the background-size is explicitly set afterwards, the issue is resolved.

Below, I am providing a small contained .apk that you can use to test this behavior by debugging through device inspection in Chrome.

Full UA Chrome string: 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

Full UA Chrome WV string: 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 - minimal Phonegap Hello World wrapper, no perms requested

The APK uses the following relevant 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; }

As you will observe, only the div with .extended class will render correctly, while both should instead.

Thank you!

3
  • I installed the apk in device. Have attached the screenshot of the app page here - imgur.com/f8L2gNN Not sure what exactly is the issue you are mentioning here. COuld you brief me?
    – Gandhi
    Jul 18, 2016 at 14:49
  • Hi @Gandhi, the issue is that both images have effectively the same CSS - the first background is defined using shorthand background with background-size, the second one is using a standalone background-size property after background is defined. Both should render just fine. The first background doesn't render correctly in WebView, but it does render correctly in the same core version of Chrome Android.
    – zrooda
    Jul 18, 2016 at 16:20
  • @Gandhi I've added the exact HTML/CSS you see in the APK to the question.
    – zrooda
    Jul 18, 2016 at 16:30

2 Answers 2

1
+50

I exploded the APK file you posted and copied your source code to my newly created cordova project. I built my project and tested in device running on Android Marshmallow. It works fine. Please find the screenshot of the result too.

Have also added the sample project in my github page. Request you to have a look at it and generate APK from the same as this could be an issue with your project setup. I m using cordova version 6.2.0 and Cordova Android version 5.1.1

Also i came across on other link which states you gotta specify position (0%) before using background-size shorthand. You may try out that option once in your setup. Hope it helps

7
  • Excellent, thanks for providing the source. Given that it works on your end, I assume this must be based on some Cordova setting. I have used latest Cordova and their Hello World demo app wrapper to produce the test APK, so the problem shouldn't be very far from defaults. Looking into the differences...
    – zrooda
    Jul 19, 2016 at 11:46
  • @mystrdat i m curious Keep me posted. Cheers
    – Gandhi
    Jul 19, 2016 at 11:47
  • Are you compiling locally or using the Phonegap build service? @Gandhi
    – zrooda
    Jul 19, 2016 at 12:16
  • @mystrdat i m compiling and building the app using cordova CLI thats the only way i have used till date and works like a charm so far. Did you found the diff?
    – Gandhi
    Jul 19, 2016 at 12:36
  • Not yet unfortunately. I thought I have it since Phonegap-CLI 5.2.0 was defaulting us to lower Android platform version than we though, but even when we forced it to platform 5.1.1 the bug remains to exist. At this point I am certain this is somewhere in the Phonegap blackbox build process and I'm working on the possible reasons. Your answer was helpful enough to get to this state, so here's the bounty! Of course, will also update you with any news. Thank you! @Gandhi
    – zrooda
    Jul 19, 2016 at 16:08
0

As reported here, background-size shorthand for android webview does not work below version 4.4 (api level 19).

But I think there are also few more problems with kitkat (look at this question:background-sizecover-not-working-in-android-native-browser).

2
  • 1
    I am aware of the feature introduction 4.4, but we are past that in the testing version - using Android 6.0.1 and the adequate webview, which is Chromium 51.
    – zrooda
    Jul 18, 2016 at 13:57
  • @Frix33 i feel the answer is not very relevant as the question states that its tested on Android 6. you can remove the answer for benefit of others. Thanks
    – Gandhi
    Jul 18, 2016 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.