Issue

From what I can tell having an image set via css background-image greatly affects navigation performance. I can recreate this in both base nativescript and nativescript with angular routers on Android. When you set background-image and attempt to navigate the page lags 1-3 seconds before starting to navigate and is slow to be responsive again. The lag is dependent on how large of an image you use, but even with a small 10kb image as the background I was still noticing a hit. Max size I tried was 250kb and it was very very slow.

I looked around and noticed the previous navigation performance issues on Android back on 2.3, but it seems like those were resolved with 2.4. Didn't see anything else on searches similar to this.

Platforms affected

Android for sure, unsure about iOS as I don't have one.

Version info:

nativescript: 2.4.2
tns-core-modules: 2.4.4
tns-android: 2.4.1

How to recreate

Set up two pages and a button to navigate between them. Set the "background-image" of both pages to be some image (200kb size or so will really show it, smaller sizes still will be noticeable). Attempt to navigate back and forth. There should be a large lag between clicking the button and the actual navigation.

Workaround

A workaround seems to be if you instead do something like:

<AbsoluteLayout>
    <Image src="~/path/to/bg.png" stretch="aspectFill" left="0" top="0" width="100%" height="100%"></Image>
    <StackLayout top="0" left="0" width="100%" height="100%">
        ... usual content here
    </StackLayout>
</AbsoluteLayout>

Then everything goes back to snappy fast even though the display will essentially show the exact same thing.