TiViewShadow Blurry elements when drop shadow is added

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.

Mar 09 '12 13:03 cansoysal

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

Mar 09 '12 13:03 omorandi

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

Mar 09 '12 14:03 cansoysal

Thanks, I'll look into it.

Mar 09 '12 14:03 omorandi

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...

Mar 17 '12 09:03 iantearle

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

Mar 17 '12 16:03 rborn

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

Mar 19 '12 15:03 omorandi

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

Mar 19 '12 16:03 jaraen

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...

Mar 20 '12 09:03 omorandi

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?

Mar 20 '12 09:03 iantearle

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];

Mar 30 '12 11:03 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.

Apr 15 '12 17:04 jaraen

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

Apr 16 '12 07:04 omorandi

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+

Apr 20 '12 07:04 iantearle

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.

Apr 20 '12 10:04 jaraen

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

Apr 20 '12 10:04 jaraen

I am still seeing blurry elements with 0.3 applied. Although not using Ti2.0 - its a bag of poo, im not spending double my development time rebuilding my app. Using 1.8.3/2 and iOS 5.1

Apr 25 '12 07:04 iantearle

Is the code above missing from TiUIView+WithShadow.m?

Apr 25 '12 08:04 atsusy

something weird happened with my first pull request. Anyway, I've uploaded again and sent pull request with the file including that code (meanwhile the requests is approved, find the code in my repo).

@iantarle, in order to use with 1.8 please consider build the project yourself. I'll maintain actively version 2, but compile for prior versions requires to setup all project paths.

Apr 25 '12 15:04 jaraen

It should be ok now! By the way, as I already noticed with Dan, it looks like the shadow is applied in an unreliable way to views. Some of you have noticed some problems with the shadow not being always applied (always talking about Ti < 2.0)?

Apr 26 '12 07:04 omorandi

Finally had a chance to build this from scratch in my environment (1.8.3 - custom, against SDK 5.1) and it works a treat, scrolling a lot faster with multiple shadows applied within a tableview.

Only one remaining issue, but due to another module, being TiStyledLabel from Appcelerator, it seems to render the shadow before the view container has worked out its height, the styled label obviously takes a little longer to return a height after the shadow has worked it out already. Simple fix was to only apply the shadow after everything on the view has been added. Still if there is a work around anyone can think of that'd be great.

Thanks for the changes guys!

Apr 30 '12 07:04 iantearle

seems that TiStyledLabel requires an upgrade to titanium 2, it does not calculate the height correctly in some situations (using height Ti.UI.SIZE). You may want to capture postlayout event, which is fired after each layout cycle, to add the shadow (and then remove the eventListener, since is called very often)

May 02 '12 15:05 jaraen