Effects for navigation bar in modal

[tabuna]

Hello, I'm a newbie. I'm following the Demo from this repository completely, and I've come across the fact that the navbar in modal windows sometimes doesn't appear with a blur.  

At first, I sinned on my HTML layout, but it doesn't seem to be the case. I recorded a video example from my device, where I opened the same page several times, where the blur effect appears / is absent. I don't see any pattern and would appreciate any advice.

Upload.from.GitHub.for.iOS.MOV

[joemasilotti]

Whoa, weird! It looks like it's working the first time but then not on subsequent loads?

Do you have any code changes to the template?

[tabuna]

Hi @joemasilotti I didn't notice any pattern in this. The effect can be applied both from the first opening and much later or not appear at all.

This is a copy from https://github.com/hotwired/turbo-ios/tree/main/Demo where the name and URL have been changed etc., I did change some code like disabling link previews (From your blog). But I don't think it led to it. I invited you to the project so that you can look at the code if you have a desire, and not just guess.

[joemasilotti]

Got it – I don't see anything out of the ordinary in your code.

Can you try adding the following somewhere before the first modal is presented? It could be in AppDelegate even.

UINavigationBar.appearance().isOpaque = true
UINavigationBar.appearance().isTranslucent = false

[tabuna]

The following result:

Upload.from.GitHub.for.iOS.MOV

[tabuna]

New additional information. In the console I see the following information:

[ViewportSizing] minimumViewportInset cannot be larger than frame

[joemasilotti]

OK, one more try. Can you see if this helps?

let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.configureWithDefaultBackground()

UINavigationBar.appearance().standardAppearance = navigationBarAppearance
UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
UINavigationBar.appearance().isOpaque = true
UINavigationBar.appearance().isTranslucent = false

[tabuna]

It seems to work great. I tested it both in the emulator and on a real device, and I was no longer able to reproduce the effect. Thanks a lot. But now the top header is always on its own background.

[joemasilotti]

I think that's the tradeoff with setting an opaque navigation bar, sadly.

[henrysipp]

#73 actually resolves this issue completely.

[joemasilotti]

@henrysipp, do you need to make any of the appearance changes, too? Or only with the cover fix?

[henrysipp]

No, just pulling and using that branch seems to have solved everything.

[JoshAntBrown]

Same here, completely resolved a similar issue I was having with the translucency no need for any appearance changes. Would be good to get it merged into main.

[joemasilotti]

Noted that #73 fixes this issue as well. I'm going to close this and track work there.