Blurry elements when drop shadow is added

[cansoysal]

Hi, I realized that adding drop shadow properties to elements makes them blurry. It's occurring only on device, not on simulator. Btw, I'm on Titanium 1.8.2 and iOS 5.0.1. Screenshot: http://dl.dropbox.com/u/2075225/blurry.png.
Thank you.

[omorandi]

Hi, could you also provide the code for a short test case?
Thanks a lot

[cansoysal]

Yes, sure, I created a test app.js, same thing happens.

var win = Ti.UI.createWindow({
backgroundColor:'#121212'
});
var tiviewshadow = require("ti.viewshadow");
var eventAnalytics = Ti.UI.createView({
width: win.width,
height: 60,
backgroundColor: '#232323',
zIndex:10
});
var eventRSVPExplain = Ti.UI.createLabel({
text: 'Facebook RSVP',
width: 'auto',
height: 12,
font: {fontFamily: 'Helvetica', fontSize: 11},
color: '#b1b1b1',
left: 10,
top: 15
});
eventAnalytics.add(eventRSVPExplain);
eventAnalytics.setShadow({shadowRadius:2,shadowOpacity:0.5,shadowOffset:{x:0, y:4}});
win.add(eventAnalytics);
win.open();

[omorandi]

Thanks,
I'll look into it.

[iantearle]

Plus one. iOS 5.1, Titanium 1.8.2 - I have a table view and scroll view that is blurry. Note also only occurring on device.

P.S. do you have a donation account? Would like to see this module improve...

[rborn]

Olivier, try to remove the rasterizing. I have a feeling that this is the issue :)

[omorandi]

Hi the problem is indeed due to setShouldRasterize:YES, however I'm afraid that removing it would negatively affect performance in animations, so I'm experimenting with an alternative solution, that is creating an additional layer just for the shadow. Problem is: it only works on the button, but not on the other views. I'm investigating on the issue

[jaraen]

why not to put rasterize as an optional property, like shadowColor os shadowRadius.

[omorandi]

The problem with shouldRasterize as an option is that the problem with blurred views won't go away, so we may have views with shadow that animate fast but look ugly, and other views that look ok, but animate slowly... I think I'm on the right track for the more general solution, though I still need some time for trying out a bunch of things. The problem resides in the very peculiar life-cycle of Ti views...

[iantearle]

Which test case are you comparing the animation events? I edited the code for my own use and have a simple animation on a whole scrollview flying out of view that has a dropshaddow appended to it, but I don't see any adverse speed issues?

[jaraen]

I think this is related to the retina display. The same app looks sharp in iPad 1 and 2, but in iPad 3 all views with shadows are blurry, like a scaled image, which makes a lot of sense if we use rasterization.

Seems that the rasterization should be scaled, as is explained here. Not tested yet, but I think we´ll have to add something like

view.layer.rasterizationScale = [[UIScreen mainScreen] scale];

[jaraen]

I get it working, adding this code to detect the screen scale

        CGFloat scale;
        if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
            scale=[[UIScreen mainScreen] scale];
        } else {
            scale=1; //only called in "old" iPads.
        }

        self.layer.rasterizationScale = scale;
        [self.layer setShouldRasterize:YES];

but note that this requires to compile for iOS 5.1 and xCode 4.3 to get it working on iPad 3 (sorry, I mean new iPad) :)

I built the project using Ti SDK 1.8.3, then launched the project in xCode and then packaged from there.

[omorandi]

Thanks Javier. Can you please send a pull request for this?

[iantearle]

Just some house keeping - the zip folder is marked up as 0.3 but the containing folder is 0.2, also new Titanium Studio is reporting that its not compatible with SDK 1.8.2+

[jaraen]

the file is compiled with titanium 2.0.1GA2 in order to be compatible with iOS 5.1. This iOS version is required to use the retina display in new iPad.

[jaraen]

About the 0.2 folder inside the 0.3 zip, check it again, I think the file is ok...