[TIMOB-28486] iOS: Title bar wrongly animates from white to custom color when back navigating on iOS 15
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | High |
| Status | Closed |
| Resolution | Invalid |
| Resolution Date | 2021-07-19T21:47:41.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | iOS |
| Labels | NavigationWindow, TabGroup, iOS, title |
| Reporter | Hans Knöchel |
| Assignee | Joshua Quick |
| Created | 2021-06-12T12:58:14.000+0000 |
| Updated | 2021-08-14T11:00:36.000+0000 |
Description
When opening a child window from a tab group, the tab bar flickers for a second and then remains in the wrong background color. This only occurs on iOS 15+
Attachments
| File | Date | Size |
|---|---|---|
| Simulator Screen Recording - iPhone 12 Pro Max - 2021-06-29 at 12.48.09.gif | 2021-06-29T11:50:05.000+0000 | 170353 |
With the code below I'm seeing the nav bar flicker when closing the window (see attached gif), [~hknoechel] does that match what you were seeing or were you seeing something else?
const tg = Ti.UI.createTabGroup({ barColor: 'red', backgroundColor: 'red' }); const window = Ti.UI.createWindow({ backgroundColor: 'white' }); window.addEventListener('click', () => { const win = Ti.UI.createWindow({ backgroundColor: 'blue' }); tg.activeTab.open(win); }); tg.addTab(Ti.UI.createTab({ title: 'Tab 1', window })); tg.open();This looks similar to what's reported here... https://developer.apple.com/forums/thread/683590
Perhaps the thing to do is to change the [TiUIWindowProxy.viewWillAppear()](https://github.com/appcelerator/titanium_mobile/blob/3059dabc5abea07cc9796133b1582d63bc894069/iphone/TitaniumKit/TitaniumKit/Sources/Modules/TiUIWindowProxy.m#L267-L296) method. Instead of changing the navigation bar's background color to "clearColor"...
...we should do the following instead. This gets rid of the flicker effect. Setting theview.backgroundColorwill make sure the status bar background color doesn't change either... which also changes the bottom tab bar color too which appears to be wrongly white on iOS 15 as well.Good catch! That could very likely be the issue!
I also noticed that the bottom tab bar defaults to appearance
configureWithTransparentBackgroundon iOS 15. This means it is completely transparent now and Titanium properties such as "tabsBackgroundColor" do not change its color anymore. I'm able to restore the old behavior (ie: semi-translucent bottom bar) by calling theconfigureWithDefaultBackgroundAPI. I also have to update the tab'sscrollEdgeAppearancetoo which is another iOS 15 breaking-change. I'll write up a separate ticket for this, but I'll likely have to solve that problem and this ticket's issue via the same PR.Nice one! Thank you Josh!
I'm concluding this is an iOS 15 bug. I can see Apple's staff has acknowledged and hopefully they'll do something about it before release. https://developer.apple.com/forums/thread/683590 The work-around I posted above works on the title bar, but it's still an issue with the status bar which briefly shows the window's background color. I don't see any way of working-around this issue for the status bar without changing the window's background color itself which isn't a good idea. *Side Note:* We should add the following call [TiUIWindowProxy.viewWillAppear()](https://github.com/appcelerator/titanium_mobile/blob/3059dabc5abea07cc9796133b1582d63bc894069/iphone/TitaniumKit/TitaniumKit/Sources/Modules/TiUIWindowProxy.m#L267-L296) method so that the top nav bar updates immediately when transitioning to the window being opened. I think this looks better. (This isn't related to this ticket.)
I just re-tested this with Xcode 13 beta 3. It looks like Apple fixed it. Woo-hoo! Other native iOS developers have confirmed it to be fixed as well... https://developer.apple.com/forums/thread/683590
I can confirm it looks good now!