fix(ios): add custom toolbar background#1132
Open
GitToTheHub wants to merge 12 commits intomasterfrom
Open
Conversation
- The WebView top was constrained to safe area top, which made a transparent gap in the top safe area. - breaking change: The site which should be dispayed in the in-app browser, have to care about the safe areas, otherwise it would be behind the camera and statusbar, which was before not the case
- Add background view for address label, so the address label can have paddings when a background is set - Add semi-transparent background with round corners - Add margins to the address background Generated-By: GPT-5, XCode 26
- Overlay Toolbar and Address Bar over the WebView, so more web content can be shown and no background must be set for the Toolbar - Insets are set for the WebView to to take the Toolbar and Address Bar into account, so the content can always be scrolled in a visible area - Depends on #1128 and #1129
- It was a little bit dark with `alpha:0.4`. Changed it to `alpha:0.2`
- On iOS 26 the background color cannot be set anymore. To make this configurable, a custom background is added, which is also used on iOS 18 and older
- To make the code simple, the margin is added for portrait and landscape. To implement this clean, we would have to listen to the orientation change and would have to change the constant in the constraint, which is to much work avoid the little margin on portait
This was referenced Mar 4, 2026
- When using an iFrame in the in-app browser, there can be scrolling issues when the toolbar and address bar overlays the webview. It's more safe to return to the old behaviour, when nothing overlays the webview.
GitToTheHub
changed the title
- On iOS 18 and older, an extra margin is not needed at top and bottom - Apply a bottom margin for the toolbar only when it is at top
Contributor
Author
|
I turned back to not overlay something over the webview, because i had scrolling issues with an iframe. Now it is like before, but the toolbar has a background which is equivalent on iOS 18 and 26. |
dpogue
reviewed
Mar 6, 2026
- Instead of using a custom approach it's better to use the tools which should be used for auto layoit - For margins use the `layoutMarginsGuide` - For spacing use `constraintEqualToSystemSpacingBelowAnchor:`
Contributor
Author
|
I updated the screenshots showing the auto layout margins and spacing and added screenshots when the toolbar is at top for iOS 18 and 26 |
- On iOS 26 there is no background by default. Also setting the `barStyle` to `UIBarStyleBlack` on iOS 26 resulted in changing the navigation buttons sometimes to dark or resulted in a black white flickering when the view appeared.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Platforms affected
iOS
Motivation and Context
Description
iOS 26 Toolbar and Address bar at bottom
Default, when no options are set
The green color is from the underyling view which opened the in-app browser.
iOS 18 and older Toolbar and Address bar at bottom
Default, when no options are set
The green color is from the underyling view which opened the in-app browser.
iOS 26 Toolbar at top Address bar at bottom
The green color is from the underyling view which opened the in-app browser.
iOS 18 and older Toolbar at top Address bar at bottom
The green color is from the underyling view which opened the in-app browser.
Landscape Toolbar Top fix
On landscape, when the toolbar is at top it was too close to the top edge, which is fixed:
Set Custom Toolbar Background Color
toolbarcolor=#FF0000withtoolbartranslucent=yeswhich is the defaulttoolbarcolor=#FF0000andtoolbartranslucent=noTesting
All options were tested with the new layout:
Other changes
toolbartranslucent[NSLayoutConstraint activateConstraints:]to activate constraintsChecklist
(platform)if this change only applies to one platform (e.g.(android))