UIVisualEffectView is erroneously also influenced by layers above it

Question

In my app, I want a CTA button to be displayed under the ads. This is located on a UIVisualEffectView for better readability.

In principle, it already works as I would like, but I have noticed a strange behavior when the EffectView scrolled under the navigation bar.

This changes slowly more and more the color to the Nav-Bar color, although this lies in a layer above. Why is this happening? How can I make sure that only the underlying colors are used?

Here is an example video: https://www.dropbox.com/s/liwyys9te3et8ns/UIVisualEffectView_Example_1.mp4?dl=0

Edit:

Don’t think this is relevant, but this is the code:

let blur = UIBlurEffect(style: colorMode == .light ? .light : .dark)
blurEffectView = UIVisualEffectView(effect: blur)
ctaBackground?.addSubview(blurEffectView!)
self.addSubview(ctaBackground!)

Answer 1

Try setting the frame.

blurEffectView.frame = view.bounds.

Otherwise, more code would help. Can't tell what is ctaBackground. Is it whole screen or just the background of that small CTA.

Furthermore, you should not force unwrap.

let bacgroundView = UIView()
addSubview(backgroundView)
ctaBackground = backgroundView