Nesting views deterioriates image quality

Question

I ran in to this problem on a recent project when the guys in the art department noticed deteriorating image quality. I'm not sure what's causing it however we were able to remedy the issue by removing the ScrollView it was nested in. But this is not a viable solution as we will need to nest images within views nested within scrollviews.

My code looked something like:

<View>
    <ScrollView>
         <View>
              <ImageView image="someImage.png" />
         </View>
    </ScrollView>
</View>

When we removed the ImageView from both the nested ScrollView and it's direct parent view it renders fine. I've created a repo with a simple project illustrating this. The dulling effect is most noticeable on the coloring of the letters, the white drop shadow on the text and the blurring of the grey border.

https://bitbucket.org/bwellons/blurry-images

Is this a bug that needs reporting or is there documentation somewhere that says "don't do it this way" that I don't know of?

Regards Brant

Answer 1

I think this is caused by not defining bounds (width, height) and anchors (top, left, right, bottom) of views in a consistent manner, for example, if I just change this:

".parent": {
    width: '100%',
    height : 59,
}

To this:

".parent": {
    top : 0,
    width: '100%',
    height : 59
}

The blurring goes away. I think this is happening because you are mixing relative and absolute view layout techniques (percentages and absolute pixels) in a tightly bound box (the .parent view is the exact same height as the child image view) which is causing the layout calculations underneath to fudge a little when they draw the image inside the parent view.

I say this because this also works to noticeably eliminate the blur, by allowing more room for transformation error:

".parent": {
    width: '100%',
    height : 62 // Added 3 pixels of padding
}

Here are some other methods that work as well, by either using the same layout mechanism for both width and height, or giving more room for transforms:

".parent": {
    width: '100%',
    height : '50%' // Dont do this, but shows the point
}

".parent": {
    bottom : 0,
    width: Ti.UI.FILL, // I use Ti.UI.FILL instead of 100% generally
    height : 59
}

So generally, stay away from mixing percentages and absolute values in nesting view chains dimensions, unless you are willing to give some wiggle room in the parent, or define anchors (top, left, right, bottom) to make the drawing transformations work out.

Disclaimer: I only base this statement on about 15-20 different limited layout tests and my own experience (I did not go through native code, yet) so this is by no means science.