Cordova background image css missing from Polymer on ios / safari

I am using CSS to set a background image for a Polymer element. This works on the web, but not inside the Cordova web app. I want to fix this.

I can hack Polymer, but I am new to Cordova and I need help tracking down the url code in Cordova.

The polymer parses the css internally and handles the css urls. On ios, the following statements are:

background-image: url('../img/health_background.png'); } <img src="../img/health_background.png">

will be replaced with:

background-image: url(file:///private/var/mobile/Containers/Bundle/Application/FE5C8C06-E9B3-4F75-B9E7-40D6FD54FC0B/SyntraJS.app/www/img/health_background.png) <img src="file:///private/var/mobile/Containers/Bundle/Application/FE5C8C06-E9B3-4F75-B9E7-40D6FD54FC0B/SyntraJS.app/www/img/health_background.png">

Polymer HTMLImports polyfill.

If you look at these elements inside the Safari debugger, the tag <img>

looks great, but the background-image:

css doesn't exist. I guess Safari didn't like its syntax and threw it away.

If I add the same properties background-image

to the Safari debugger it works.

Any suggestions on: - why is Safari ignoring the original background-image

? - Are all URLs in Cordova applications absolute file addresses?

+3


source to share





All Articles