How to minimize visual flickering with iOS8 “UIVisualEffectView with Blur”

Question

I have a particular app that, because of the navigation structure, leaves me unable to use normal UINavigationBars with translucency, so I've chosen to try and use iOS8's UIVisualEffectView with Blur.

This solution mostly works, but there is a very noticeable flickering effect that occurs when the UITableView beneath this blur view is scrolled around. As the edges of an image or colored rect pass underneath the blur view, there is a significant amount of flickering that occurs.

Has anyone experienced this? Anyone know how to solve this problem?

My implementation is simple, I dragged a UIVisualEffectView onto my view controller and constrained it to top, left, and right screen bounds, and added a height constraint of 64. Beneath that is just a UITableView with some images and text.

Answer 1

"I assume that what's not under the view is not being taken into account to compute the blur. It is likely being extrapolated (by padding the image by mirroring, replicating, wrapping, etc… as you would do to minimize boundary effects on any convolution). But this creates an undesired visual jump in many cases.

If you want to minimize this artifact, just make the UIVisualEffectView bigger than your view. A few pixels will suffice, the blurring kernel is not that big anyway. And make your view to clip to bounds."

Reference: https://medium.com/@imho_ios/avoid-artifacts-on-uiblureffect-edges-c30e737c21fb

This worked for me, at least eliminated the bottom flickering in the Navigation Bar. However, it did not work at the top. I believe that is due to view (maybe UIWindow?) clipping against - in my case - the tableView.

UPDATE: It seems the bug are fixed in iOS 9.0 and later.

Answer 2

I make an uiview which alpha is 0 and add blurview as subview of that. So i can minimize that flickering problem also can hide/show or rounding corners it with animation.