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

Also, I'm not familiar with titanium, but to me it sounds that for some reason these controls are scaling your image. Did you measure the exact pixel size of your image between the two scenario's you describe above? Is there a difference? — svenv, Aug 15 '13 at 16:26
I corrected the link by removing .git from the repo name. It should work now. — Brant, Aug 15 '13 at 17:04
And yes, the two images used are actually the same image, they reference the exact same file and the views are set to the exact dimensions of the image. — Brant, Aug 15 '13 at 17:05
This probably is not be the bug, but your index.tss has slightly fuzzy style for `btmImg`, it should be `#btmImg`, right? — Josiah Hester, Aug 15 '13 at 21:05

score 2 · Accepted Answer · answered Aug 20 '13 at 12:45

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.

Nesting views deterioriates image quality

1 Answers1