How is the seamless blur effect achieved when a popup bar is presented and docked to the top of a tab bar?

[gcox]

@LeoNatan I'm curious how you're achieving the seamless blur effect behind a presented LNPopupBar docked to a UITabBar? In my experience, when you have two UIVisualEffectViews that are effectively side-by-side, the content behind them is not seamlessly blurred at the adjacent edges of the effect views.

Here's a screenshot of two UIVisualEffectViews that are side-by-side, with a scrollview containing a large UIImageView behind them. The edges are clearly visible and scrolling makes the effect much more distracting:

However, in LNPopupController, this issue is somehow avoided between the LNPopupBar and UITabBar. After looking through the source and analyzing the view hierarchy, I have been unable to determine what LNPopupController is doing to avoid this problem. Can you explain how you managed to avoid this issue or if you even did so intentionally?

[LeoNatan]

Hello,

You can find the implementation here:

LNPopupController/LNPopupController/LNPopupController/Private/LNPopupBar.m

Line 428 in be669a1

- (NSString*)_effectGroupingIdentifierKey

LNPopupController/LNPopupController/LNPopupController/Private/LNPopupBar.m

Line 441 in be669a1

[visualEffectView setValue:groupingIdentifier ?: [NSString stringWithFormat:@"<%@:%p> Backdrop Group", self.class, self] forKey:self._effectGroupingIdentifierKey];

UIKit has a hidden property which synchronizes between visual effect views, which the system uses internally to achieve what you need. I just investigated and also use it for the popup bar.

The idea is to set a group name that is the same for the bottom bar’s background and and the popup bar’s background. As long as the effect properties are the same, it will be seamless.

BTW, nice eye for details! 🙂 Not many notice these tiny details.

[gcox]

Oh nice, thanks for explaining! I saw this code but didn't bother checking to see what the key was after decoding the base64 string 🤦