Nativescript: background-image size/position scale in android

[tralves]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 5.0.0
• Cross-platform modules: 5.0.2
• Android Runtime: 5.0.0
• iOS Runtime: 5.0.0

This bug also occured on NS 4.2.

Describe the bug
The background-image size and position seems to be calculated with the wrong scale.
I am adding a background image to a <Button> with the relevant SCSS:

button.social-login {
  // (...)
  height: 50;
  background-size: 32 32;
  background-position: 20 8;
  background-repeat: no-repeat;

  &.fb {
    background-color: #167dc3;
    background-image: url('res://facebookicon');
  }

  &.google {
    background-color: #eb4e41;
    background-image: url('res://googleicon');
    margin-bottom: 50;
  }
}

See the next image:

This image shows 3 devices:

• Android Nexus 9 (xxhdpi)
• Android Nexus 5X (xxxhdpi)
• iPhone 6

The icon is rendered as expected on iOS. On Android, it seems to be calculating with real pixels instead of DPIs. I know this because the xxhdpi is sligtly bigger than the xxxhdpi.

To Reproduce
Add a background-image with a background-size and background-position. Test in Android.
See https://play.nativescript.org/?template=play-vue&id=CkrRMy.

Expected behavior
On android, the background image should be scaled properly (as it happens on Android).

Sample project
https://play.nativescript.org/?template=play-vue&id=CkrRMy

Additional context
I thought I figured out a pretty cool way to add a color icon to a button without adding more components/layouts. I was bummed when I saw the result on Android...

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tralves]

If anyone would give me some pointers, maybe I could give it a shot at fixing this bug. I would be pretty stoked to contribute to NS in a useful way.

[tralves]

I discovered that I get a consistent size for the icons if I add dip:

background-size: 32dip 32dip;

Unfortunately, it doesn't work for the background-position. E.g. the line background-position: 20dip 8dip; is ignored.

My problem could be solved with background-position: 20 center;, but this doesn't work either...

[tsonevn]

Hi @tralves,
Thank you for the provided sample project. I noticed that there is some inconsistency while setting up the background-size and background-position properties in iOS. Also, I was able to recreate the issue in a non-Vue project. We will investigate further the problem and will provide more info on the issue.

[alecmarcus]

Having a similar issue. Using background-size: cover stretches the image while covering the given element's area.

Setting explicit dimensions, with or without dip, does not behave as expected at all. The image's width is limited to the element's width in these cases, no matter what. In addition, the height is not set correctly — I can't begin to make out how the drawn image's is determined at all.

[aftoncreative]

@alecmarcus Did you manage to resolve? Also having the same issue and background images are all streched.

[aftoncreative]

@alecmarcus Just wanted to share how I managed to find a workaround to this issue.

Instead of relying on background-image, I used with stretch="aspectFill" and Inside of GridLayout added the image element as a first element on the Grid with "rowSpan='10' colSpan='10'.

This way I managed to achieve what I wanted to do with the "background-image" and it scales perfectly.

[patrik90909]

@aftoncreative Do you have any code example?

[alexgritton]

If you're trying to set an image that covers the entire screen, even the iOS Safe Area, the only work around I've found is two part. The GridLayout with an Image works great for Android phones, but on iPhones it will stop at the Safe Area. If you want the image to cover the entire screen (including the Safe Area) you'll still have to set the background-image in css and hide the Image in the GridLayout.