Visual Design

RSS for tag

Discuss animation, branding, color, layout, typography, and other elements of great looking apps.

Posts under Visual Design tag

160 Posts

Post

Replies

Boosts

Views

Activity

iOS 26.0.1: Different Liquid Glass Effects
Hello everyone, In the current iOS version, changes in the "liquid glass" light shining effects can repeatedly be observed on older iPhone devices (12/13/14). This change is often seen after the device is rebooted or after a SystemMemoryReset.ips (System Analysis Data). It changes very often... I'm not currently working on apps myself, but perhaps someone has ideas for the upcoming updates involving Liquid Glass. (please also check the screenshots)
0
0
989
Oct ’25
Weird transparency in sidebar in iPad app
I have an iPad app with a classic sidebar. It's been working fine for years. Now with iPadOS 26 the sidebar sometime gets this fake transparency that makes it really hard to quickly grok. A part of Liquid Glass seems to be to sometimes (but not always) take whatever is in the secondary area (the main big content), blur it, mirror it and then use as the background for the sidebar. This is silly and does not work at all for an app like mine. It maybe looks decent if your background is a photo or similar, but not for an app that manages data. Not all views cause the sidebar to get this ugly unreadable background. In most of the cases the sidebar keeps its normal opaque background that it has always had. See this example for how it looks when it's really bad: This is how it should look. Notice that the content of the "main view" is pretty similar to the case where it gets the ugly background. The difference is the segmented thing at the top, ie. a different "root view". Is there some good way for me to force the sidebar to always have an opaque background? I guess I could make a ZStack and put a solid color as the background behind the sidebar, but those kinds of hacks are better to avoid. This can not be how some UI designer envisioned that apps should look? Maybe I'm missing some new modifier or setting somewhere that would led me opt out from this aspect of Liquid Glass? Apart from this it looks pretty nice. There are some bugs where the contents of the main area gets clipped when the sidebar is shown, hidden and then shown again, but that's for another time (and it's surely known already (if the bug tracking system allowed me to search I could verify)). So, any way to make my app look nice again?
4
0
480
Oct ’25
CarPlay Simulator: How to Change Dock Position for Right-Hand Drive (RHD)
Hello everyone, I'm developing a CarPlay app and am trying to test it with the dock on the right side of the screen, as is standard for right-hand drive vehicles like those in Japan. Currently, the CarPlay Simulator always displays the dock on the left, and I can't find an option to change its position. This is important for ensuring a proper user experience for my target market. Has anyone figured out how to configure the simulator for RHD layouts? Any guidance on how to move the dock to the right would be greatly appreciated. Thanks in advance for your help!
0
0
264
Sep ’25
iOS 26 Beta breaks scroll/gesture in SwiftUI chat (worked in iOS 18): Simultaneous gestures & ScrollViewReader issues
Hi all, After upgrading to the iOS 26 beta, the scrolling in my SwiftUI chat view is completely broken. The exact same code works perfectly on iOS 18. Context: I have a chat view using ScrollViewReader and a vertically-reversed ScrollView (with .rotationEffect(.degrees(180))). Each message row (MessageBubble) uses multiple simultaneousGesture handlers: Horizontal drag for swipe-to-reply (and other actions: pin, delete) Long press for showing popover/actions Vertical scroll for normal chat scrolling This was working great on iOS 18. In iOS 26 beta, the vertical scroll is either completely disabled, jittery, or hijacked by the message row’s drag gestures, even though .simultaneousGesture is used (see code below). Minimal Repro Sample MessageListView.swift swift Copy Edit ScrollViewReader { proxy in ScrollView(.vertical, showsIndicators: false) { LazyVStack(spacing: 0) { // ... grouped messages ForEach(...) { ... MessageBubble(...) // see below } Color.clear.frame(height: 8).id("BOTTOM_ANCHOR") } .padding(.horizontal, 4) .rotationEffect(.degrees(180)) } .rotationEffect(.degrees(180)) } MessageBubble.swift struct MessageBubble: View { // ... var body: some View { // horizontal swipe-to-reply gesture let dragGesture = DragGesture(minimumDistance: 10) // ... ZStack { // ... HStack { ... } // ... .simultaneousGesture( DragGesture(minimumDistance: 0) // for long press // ... ) .simultaneousGesture(dragGesture) // for horizontal swipe } // ... } }
8
10
1.8k
Sep ’25
Menu view flashes white before closing when device is set to dark appearance
Feedback ID: FB19846667 When dismissing a Menu view when the device is set to dark appearance, there is a flash of lightness that is distracting and feels unnatural. This becomes an issue for apps that rely on the user interacting with Menu views often. When using the overflow menu on a toolbar, the effect of dismissing the menu is a lot more natural and there is less flashing. I expect a similar visual effect when creating Menu views outside of a toolbar. Has anyone found a way around this somehow? Comparison between dismissing a menu and a toolbar overflow: https://www.youtube.com/shorts/H2gUQOwos3Y Slowed down version of dismissing a menu with a visible light flash: https://www.youtube.com/shorts/MBCCkK-GfqY
0
0
276
Aug ’25
Ignore Home Screen Tint/Accents in Colored Components
I'm having some trouble getting my widget to display how I want when the user has a tint applied to their home screen. The issue I'm having is with a Text() element, as well as a LinearGradient I am displaying on top of my image. The text should always be white, and the gradient is always black with varying levels of opacity. I've managed to fix this issue with images displayed in my widget by leveraging widgetAccentedRenderingMode(.fullColor) however, there does not seem to be an equivalent of this for non-Image components. I'm aware of .widgetAccentable(false) but as I understand it, elements are already considered not accentable by default and you need to explicitly declare widgetAccentable(true) to add them to the accent group. I've tried specifying this to be false up and down my view hierarchy just to see if something will stick but no luck. Are there any other levers I can pull to preserve the declared colors for my text and gradient components? The images I am displaying is album artwork where preserving the original image is integral, but the tinted text color and overlaid gradient often clash or just looks bad in general. Is there a solution for colored primitive elements?
0
0
223
Aug ’25
iOS 26 UITabBar size issue
On iOS 26 not able to control size of UITabBar. Sharing code below. Colour is applying correctly but somehow _UITabBarPlatterView which turns out as TabBar is not extending; leaving spaces on left, right & bottom sides. class CustomTabBar: UITabBar { override init(frame: CGRect) { super.init(frame: frame) backgroundColor = .red let firstItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0) let secondItem = UITabBarItem(title: "Search", image: UIImage(systemName: "magnifyingglass"), tag: 1) let thirdItem = UITabBarItem(title: "Profile", image: UIImage(systemName: "person.circle"), tag: 2) items = [firstItem, secondItem, thirdItem] selectedItem = firstItem } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } class ViewController: UIViewController { let tabBar: CustomTabBar = { let tb = CustomTabBar() tb.translatesAutoresizingMaskIntoConstraints = false return tb }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .systemBackground view.addSubview(tabBar) NSLayoutConstraint.activate([ tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 25), tabBar.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -25), tabBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor) ]) } } when specifying height in CustomTabBar explicitly... func alignInternalSubViews() { subviews.forEach { subView in subView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ subView.topAnchor.constraint(equalTo: topAnchor), subView.leadingAnchor.constraint(equalTo: leadingAnchor), subView.trailingAnchor.constraint(equalTo: trailingAnchor), subView.bottomAnchor.constraint(equalTo: bottomAnchor), subView.heightAnchor.constraint(equalToConstant: 62) ]) } } What should I need to do in order to get this capsule _UITabBarPlatterView and its subviews resize accordingly?
3
0
1.3k
Aug ’25
iOS: How to maintain good app icon contrast in grayscale mode?
I’m developing an iOS app, and I’ve noticed that when the user enables Accessibility → Display & Text Size → Color Filters → Grayscale, my app icon loses a lot of visual contrast. The original colored version looks fine, but in grayscale it appears “flat” and harder to distinguish, unlike a pure black-and-white design. What I want to achieve: Ensure the app icon remains visually clear and high-contrast even when iOS renders it in grayscale. Ideally, provide an alternate “high-contrast” app icon version when grayscale mode is enabled. What I’ve tried: Increased color contrast in the original icon design. Added outlines and stronger shapes. Tested with grayscale filters in design tools. Researched Asset Catalog and alternate icons, but found no documented API to detect or respond to grayscale mode. Questions: Is there any API in iOS that allows detecting when the system is in grayscale mode so that I can programmatically switch to an alternate app icon? If not, are there Apple-recommended best practices for designing app icons that still look clear in grayscale? Are there any accessibility guidelines specifically addressing icon design for grayscale or color-blind modes? Additional info: iOS version tested: iOS 17.5 Development in Swift + SwiftUI, using Asset Catalog for icons. I am aware that iOS supports alternate icons via setAlternateIconName, but I haven’t found a trigger for grayscale mode.
0
1
548
Aug ’25
Maintain app icon contrast when switching to grayscale mode
Context & Issue I am developing an iOS application. My app icon uses colors that are relatively close to each other. When the user enables Accessibility → Display & Text Size → Color Filters → Grayscale (or similar modes), the icon becomes harder to distinguish because it loses color and contrast is reduced. Goal When iOS switches to grayscale mode, I want the app icon to maintain good contrast between its elements so it remains clearly recognizable. What I’ve tried Redesigned the icon with more contrasting colors. Added strokes/outlines, but it still doesn’t look much better in grayscale. Researched how iOS renders app icons when grayscale is enabled, but couldn’t find a way to override or provide an alternative icon. Specific questions Is there any API or mechanism in iOS that allows providing a different version of the app icon when the user has grayscale mode enabled? If there’s no direct API, are there any best practices for designing iOS app icons to ensure good contrast when converted to grayscale? Do we have to design grayscale version for app icon? Thank you!
0
0
440
Aug ’25
Why my link color changes back to system default on click and hold?
I currently have a custom UITextView that properly changes the color of a link to the custom color I have set, however, when I click and hold the link, and the animation plays that makes the link bigger and creates a boarder around the link before previewing the website, the link changes briefly back to the system default color, and when letting go, it changes back to my custom color. Is there anyway to have the link always be my custom color, even when clicking and holding? struct AutoDetectedClickableDataView: UIViewRepresentable { let text: String let dataDetectors: UIDataDetectorTypes @Binding var height: CGFloat private func dataDectectorValue(_ dataDectecor: UIDataDetectorTypes) -> UInt64 { var checkingTypes: [NSTextCheckingResult.CheckingType] = [] if dataDetectors.contains(.phoneNumber) { checkingTypes.append(.phoneNumber) } if dataDetectors.contains(.link) { checkingTypes.append(.link) } if dataDetectors.contains(.address) { checkingTypes.append(.address) } if dataDetectors.contains(.calendarEvent) { checkingTypes.append(.date) } if checkingTypes.isEmpty { return 0 } let intCheckingTypes: UInt64 = checkingTypes.reduce(0) { result, checkingType in UInt64(result) | UInt64(checkingType.rawValue) } return intCheckingTypes } func makeUIView(context: Context) -> UITextView { let textView = UITextView() textView.dataDetectorTypes = dataDetectors textView.isEditable = false textView.isScrollEnabled = false textView.backgroundColor = .clear textView.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: UIFont.systemFont(ofSize: 16.0), compatibleWith: textView.traitCollection) textView.textColor = UIColor.label textView.adjustsFontForContentSizeCategory = true textView.textContainer.lineBreakMode = .byWordWrapping textView.textContainerInset = .zero textView.textContainer.lineFragmentPadding = 0 textView.translatesAutoresizingMaskIntoConstraints = false textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal) textView.setContentHuggingPriority(.defaultHigh, for: .horizontal) textView.linkTextAttributes = [.foregroundColor: JeromesColors.UILinkColor] textView.tintColor = JeromesColors.UILinkColor for gesture in textView.gestureRecognizers ?? [] { if gesture is UITapGestureRecognizer { gesture.view?.tintColor = JeromesColors.UILinkColor } } return textView } func updateUIView(_ uiView: UITextView, context: Context) { let font = UIFontMetrics(forTextStyle: .body).scaledFont(for: UIFont.systemFont(ofSize: 16.0), compatibleWith: uiView.traitCollection) let color = UIColor.label let attributed = NSMutableAttributedString(string: text, attributes: [ .font: font, .foregroundColor: color ]) let detectorValue = dataDectectorValue(dataDetectors) var matchCount = 0 if !dataDetectors.isEmpty, detectorValue != 0 { let detector = try? NSDataDetector(types: detectorValue) detector?.enumerateMatches(in: text, options: [], range: NSRange(location: 0, length: text.utf16.count)) { match, _, _ in guard let match = match else { return } if match.resultType == .date, let date = match.date, date < Date() { return } else { attributed.addAttributes([ .foregroundColor: JeromesColors.UILinkColor, .underlineStyle: NSUnderlineStyle.single.rawValue, ], range: match.range) matchCount += 1 } } } uiView.attributedText = attributed if matchCount == 0 { uiView.isSelectable = false } else if matchCount > 0 { uiView.isSelectable = true } DispatchQueue.main.async { uiView.layoutIfNeeded() let fittingSize = CGSize(width: uiView.bounds.width, height: .greatestFiniteMagnitude) let size = uiView.sizeThatFits(fittingSize) height = size.height } } }
0
0
248
Aug ’25
SwiftUI Layout Issue - Bottom safe area being ignored for seemingly no reason.
Hello there, I ran into a very strange layout issue in SwiftUI. Here's the View: struct OnboardingGreeting: View { /// ... let carouselSpacing: CGFloat = 7 let carouselItemSize: CGFloat = 110 let carouselVelocities: [CGFloat] = [0.5, -0.25, 0.3, 0.2] var body: some View { ZStack(alignment: Alignment(horizontal: .center, vertical: .iconToCarouselBottom)) { VStack(spacing: carouselSpacing) { ForEach(carouselVelocities, id: \.self) { velocityValue in InfiniteHorizontalCarousel( albumNames: albums, artistNames: artists, itemSize: carouselItemSize, itemSpacing: carouselSpacing, velocity: velocityValue ) } } .alignmentGuide(.iconToCarouselBottom) { context in context[VerticalAlignment.bottom] } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .top) LinearGradient( colors: [.black, .clear], startPoint: .bottom, endPoint: .top ) // Top VStack VStack(spacing: 0) { RoundedRectangle(cornerRadius: 18) .fill(.red) .frame(width: 95, height: 95) .alignmentGuide(.iconToCarouselBottom) { context in context.height / 2 } Text("Welcome to Music Radar!") .font(.title) .fontDesign(.serif) .bold() Text("Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum") .font(.body) .fontDesign(.serif) PrimaryActionButton("Next") { // navigate to the next screen } .padding(.horizontal) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) } .ignoresSafeArea(.all, edges: .top) .statusBarHidden() } } extension VerticalAlignment { private struct IconToCarouselBottomAlignment: AlignmentID { static func defaultValue(in context: ViewDimensions) -> CGFloat { context[VerticalAlignment.center] } } static let iconToCarouselBottom = VerticalAlignment( IconToCarouselBottomAlignment.self ) } At this point the view looks like this: I want to push the Button in the Top VStack to the bottom of the screen and the red rounded rectangle to stay pinned to the bottom of the horizontal carousel (hence the custom alignment guide being introduced). The natural solution would be to add the Spacer(). However, for some reason when I do it, it results in the button going all the way down to outside of the screen, which means that the bottom safe area isn't being respected. Using the alignment parameter in the flexible frame also doesn't work the way I want it to. I suspect that custom alignment guide can cause this behavior but I can't find the way to fix it. Help me out, please.
3
0
339
Jun ’25
iOS 26 not showing new screenshot animation
Hi everyone, I’m currently testing iOS 26 on my iPhone as part of the developer program. According to Apple’s documentation and demo materials, a new screenshot animation was introduced in this version. However, when I take a screenshot on my device, the animation remains the same as in previous iOS versions. I’ve double-checked that I’m running the correct build of iOS 26, and I haven’t found any settings that might enable or disable this feature. Is anyone else experiencing the same issue? Could this new animation be device-specific, region-limited, or require additional configuration? Any insight would be appreciated! Thanks in advance, Alonso Rivera
0
0
352
Jun ’25
Animating items between a VStack and a ZStack?
Hey there! I'd love to know if theres a way where you can animate items between ZStack and VStacks? Just like the native iOS notifications on the Lockscreen stack at the bottom and if tapped, they convert from a Stack to a List - I have a list with items, displayed in a VStack, and I make the list collapsable when swiping down, where the items stack behind eachother with a progresisve reduction in opacity & scale, but I havent figured out a way to animate the items between the list and the stack - where you can visually see items starting to overlap and stack ontop of eachother when collapsing the list.
0
0
185
May ’25
Apple greets Global Accessibility Awareness Day with severe accessibility violations on macOS
I'm reposting here my FB17602742, submitted yesterday: The strong wording of this message comes from years of Apple ignoring the needs of users who can't tolerate UI animations and convulsions. At this point, it's clear that Apple is either intentionally harming users like me or simply doesn't care about meeting even the most basic accessibility standards on macOS. Yes, many UI animations and convulsions can, fortunately, be disabled - but not through straightforward UI controls. Instead, users are forced to look for obscure Terminal commands found scattered across the Internet. The "Reduce motion" checkbox in System Settings is simply a fake control that doesn't do anything - instead of actually disabling all UI animations and convulsions. What's worse, two of the most offensive UI animations cannot be disabled at all. Apple has consistently dismissed requests to let users disable the following UI animations: Scroll bar rollover highlight effect (introduced on macOS 10.7.3). Every time the cursor passes over a scroll bar, it gets highlighted. This draws the user's attention to random scroll bars for no reason - just because the cursor happened to pass over them. It results in HUNDREDS of unnecessary, annoying events of distraction daily!
 Expand/collapse animation of NSOutlineView (e.g., when opening/closing folders in the list view in the Finder, or any other app using outline views). This animation is extremely distracting, irritating, and time-wasting. Global Accessibility Awareness Day is approaching. Dear Apple, Please adhere to the most basic accessibility standards. Stop the needless suffering of countless users like me. Let us disable the two aforementioned UI convulsions. Thank you for your attention to the issue.
0
0
246
May ’25
Scrollview and a background image set to scaledToFill....
I've been beating my head against the wall over a scrollview issue where the top and bottom are cut off in landscape mode. Portrait mode - everything runs swimmingly. The moment I flip the iPad on its side, though, I lose about a quarter of the view on the top and bottom. I thought this was something to do with framing or such; I ran through a myriad of frame, padding, spacer, geometry...I set it static, I set it to dynamically grow, I even created algorithms to try to figure out how to set things to the individual device. Eventually, I separated the tablet and phone views as was suggested here and on the Apple dev forums. That's when I started playing around with the background image. Right now I have.... ZStack { Image("background") .resizable() .scaledToFill() .ignoresSafeArea() ScrollView { VStack(spacing: 24) {.... The problem is the "scaledToFill". In essence, whenever THAT is in the code, the vertical scrollview goes wonky in landscape mode. It, in essence, thinks that it has much more room at the top and the bottom because the background image has been extended at top and bottom to fill the wider screen of the iPad in landscape orientation. Is there any way to get around this issue? The desired behavior is pretty straightforward - the background image fills the entire background, no white bars or such, and the view scrolls against it.
3
0
264
Apr ’25
Live Activity animate without updating data
Is it actually possible to display animation (even a simple one) on Live Activity? But on these cases: The main app is terminated - of course, I know I can use the main app to keep updating the Live Activity to make simple animations work, but in this case, the main app is killed. Live Activity data is not updating - I also understand that the Live Activity can perform animations when its data is being update via push notification or other means, but the current case is the data is not being updated. I’ve tried several ways to achieve this, but nothing seems to work. Just when I was about to give up, I found this video from Apple’s official channel: https://www.youtube.com/watch?v=m6WMwSj_EbA At 4:14 in this video, you can see the text "Locating Driver" with the breathing animation. Could someone please help me understand how to implement that kind of animation in a Live Activity when: The main app is not running, and The Live Activity data is not updating?
0
0
197
Apr ’25
iPad/iPhone - Display best practices….
So…I am hitting a wall here and could use some guidance towards best practice. I’ve developed an app in Xcode/SwiftUI that renders just fine on the iPhone - text, images, buttons, frames…everything is nicely centered on the screen or scrolls where and when I want. The iPad though…not so much. I’m having issues with tops and bottoms being cut off in scrollviews. These are just straight up text screens too - the ones with other elements/controls…they’re rendering fine. I’ve tried a mix of geometry, vstack, scrollview, padding, spacers…the lot of it. Nothing I seem to do works - the views do not want to fill and fit properly. And, of course, the issue becomes worse the moment you flip the iPad into landscape view. Or use the 13” models. I’d imagine others are battling these issues as well and found solutions, so I decided to hit up the brain trust.
3
0
406
Apr ’25
Apple is lying about its commitment to accessibility on macOS
I've just received an email from Apple regarding the Global Accessibility Awareness Day and some forthcoming sessions to promote their accessibility features. What a joke. For many years, Apple refuses to provide the most basic accessibility requirement on macOS: LET USERS DISABLE ALL NON-CONSENSUAL UNSOLICITED ANIMATIONS AND OTHER UI CONVULSIONS. The scourge of animations started from macOS Lion. Yes, many of them can be, fortunately, disabled through some obscure Terminal commands (that is, if the user is lucky enough to discover them on some obscure internet resources). The "Reduce motion" control in System Settings is a fake option that doesn't do anything. And there are two most glaring accessibility violations that cannot be disabled: Scroll bar rollover highlight effect introduced on macOS 10.7.3. Every time you move the cursor over a scroll bar, the bar gets highlighted. It results in bringing the user's attention to random scroll bars for no reason whatsoever just because the cursor happens to pass over the bar at some point. HUNDREDS of unnecessary, annoying events of distraction daily! Expand/collapse animation of NSOutlineView (such as when we open/close a folder in the list view in the Finder, as well as any other app that's using outline views). It's extremely annoying, distracting, and time-wasting. All feedback submitted about this through the years remains mostly ignored (except for a few cases where I received some ridiculous replies from employees who, apparently, are barely familiar with Macs in general). Apple does NOT care about accessibility. Not only this, but it's obvious that Apple is, in fact, intentionally abusing those users who can't tolerate distracting, time-wasting animations and UI convulsions.
0
1
334
Apr ’25
iOS 26.0.1: Different Liquid Glass Effects
Hello everyone, In the current iOS version, changes in the "liquid glass" light shining effects can repeatedly be observed on older iPhone devices (12/13/14). This change is often seen after the device is rebooted or after a SystemMemoryReset.ips (System Analysis Data). It changes very often... I'm not currently working on apps myself, but perhaps someone has ideas for the upcoming updates involving Liquid Glass. (please also check the screenshots)
Replies
0
Boosts
0
Views
989
Activity
Oct ’25
Weird transparency in sidebar in iPad app
I have an iPad app with a classic sidebar. It's been working fine for years. Now with iPadOS 26 the sidebar sometime gets this fake transparency that makes it really hard to quickly grok. A part of Liquid Glass seems to be to sometimes (but not always) take whatever is in the secondary area (the main big content), blur it, mirror it and then use as the background for the sidebar. This is silly and does not work at all for an app like mine. It maybe looks decent if your background is a photo or similar, but not for an app that manages data. Not all views cause the sidebar to get this ugly unreadable background. In most of the cases the sidebar keeps its normal opaque background that it has always had. See this example for how it looks when it's really bad: This is how it should look. Notice that the content of the "main view" is pretty similar to the case where it gets the ugly background. The difference is the segmented thing at the top, ie. a different "root view". Is there some good way for me to force the sidebar to always have an opaque background? I guess I could make a ZStack and put a solid color as the background behind the sidebar, but those kinds of hacks are better to avoid. This can not be how some UI designer envisioned that apps should look? Maybe I'm missing some new modifier or setting somewhere that would led me opt out from this aspect of Liquid Glass? Apart from this it looks pretty nice. There are some bugs where the contents of the main area gets clipped when the sidebar is shown, hidden and then shown again, but that's for another time (and it's surely known already (if the bug tracking system allowed me to search I could verify)). So, any way to make my app look nice again?
Replies
4
Boosts
0
Views
480
Activity
Oct ’25
CarPlay Simulator: How to Change Dock Position for Right-Hand Drive (RHD)
Hello everyone, I'm developing a CarPlay app and am trying to test it with the dock on the right side of the screen, as is standard for right-hand drive vehicles like those in Japan. Currently, the CarPlay Simulator always displays the dock on the left, and I can't find an option to change its position. This is important for ensuring a proper user experience for my target market. Has anyone figured out how to configure the simulator for RHD layouts? Any guidance on how to move the dock to the right would be greatly appreciated. Thanks in advance for your help!
Replies
0
Boosts
0
Views
264
Activity
Sep ’25
iOS 26 Beta breaks scroll/gesture in SwiftUI chat (worked in iOS 18): Simultaneous gestures & ScrollViewReader issues
Hi all, After upgrading to the iOS 26 beta, the scrolling in my SwiftUI chat view is completely broken. The exact same code works perfectly on iOS 18. Context: I have a chat view using ScrollViewReader and a vertically-reversed ScrollView (with .rotationEffect(.degrees(180))). Each message row (MessageBubble) uses multiple simultaneousGesture handlers: Horizontal drag for swipe-to-reply (and other actions: pin, delete) Long press for showing popover/actions Vertical scroll for normal chat scrolling This was working great on iOS 18. In iOS 26 beta, the vertical scroll is either completely disabled, jittery, or hijacked by the message row’s drag gestures, even though .simultaneousGesture is used (see code below). Minimal Repro Sample MessageListView.swift swift Copy Edit ScrollViewReader { proxy in ScrollView(.vertical, showsIndicators: false) { LazyVStack(spacing: 0) { // ... grouped messages ForEach(...) { ... MessageBubble(...) // see below } Color.clear.frame(height: 8).id("BOTTOM_ANCHOR") } .padding(.horizontal, 4) .rotationEffect(.degrees(180)) } .rotationEffect(.degrees(180)) } MessageBubble.swift struct MessageBubble: View { // ... var body: some View { // horizontal swipe-to-reply gesture let dragGesture = DragGesture(minimumDistance: 10) // ... ZStack { // ... HStack { ... } // ... .simultaneousGesture( DragGesture(minimumDistance: 0) // for long press // ... ) .simultaneousGesture(dragGesture) // for horizontal swipe } // ... } }
Replies
8
Boosts
10
Views
1.8k
Activity
Sep ’25
Idea for Wallpaper Feature
I think iPhone users should have a feature in Wallpaper that allows each page in the homescreen to have a different wallpaper.
Replies
1
Boosts
0
Views
420
Activity
Sep ’25
Menu view flashes white before closing when device is set to dark appearance
Feedback ID: FB19846667 When dismissing a Menu view when the device is set to dark appearance, there is a flash of lightness that is distracting and feels unnatural. This becomes an issue for apps that rely on the user interacting with Menu views often. When using the overflow menu on a toolbar, the effect of dismissing the menu is a lot more natural and there is less flashing. I expect a similar visual effect when creating Menu views outside of a toolbar. Has anyone found a way around this somehow? Comparison between dismissing a menu and a toolbar overflow: https://www.youtube.com/shorts/H2gUQOwos3Y Slowed down version of dismissing a menu with a visible light flash: https://www.youtube.com/shorts/MBCCkK-GfqY
Replies
0
Boosts
0
Views
276
Activity
Aug ’25
Ignore Home Screen Tint/Accents in Colored Components
I'm having some trouble getting my widget to display how I want when the user has a tint applied to their home screen. The issue I'm having is with a Text() element, as well as a LinearGradient I am displaying on top of my image. The text should always be white, and the gradient is always black with varying levels of opacity. I've managed to fix this issue with images displayed in my widget by leveraging widgetAccentedRenderingMode(.fullColor) however, there does not seem to be an equivalent of this for non-Image components. I'm aware of .widgetAccentable(false) but as I understand it, elements are already considered not accentable by default and you need to explicitly declare widgetAccentable(true) to add them to the accent group. I've tried specifying this to be false up and down my view hierarchy just to see if something will stick but no luck. Are there any other levers I can pull to preserve the declared colors for my text and gradient components? The images I am displaying is album artwork where preserving the original image is integral, but the tinted text color and overlaid gradient often clash or just looks bad in general. Is there a solution for colored primitive elements?
Replies
0
Boosts
0
Views
223
Activity
Aug ’25
iOS 26 UITabBar size issue
On iOS 26 not able to control size of UITabBar. Sharing code below. Colour is applying correctly but somehow _UITabBarPlatterView which turns out as TabBar is not extending; leaving spaces on left, right & bottom sides. class CustomTabBar: UITabBar { override init(frame: CGRect) { super.init(frame: frame) backgroundColor = .red let firstItem = UITabBarItem(title: "Home", image: UIImage(systemName: "house"), tag: 0) let secondItem = UITabBarItem(title: "Search", image: UIImage(systemName: "magnifyingglass"), tag: 1) let thirdItem = UITabBarItem(title: "Profile", image: UIImage(systemName: "person.circle"), tag: 2) items = [firstItem, secondItem, thirdItem] selectedItem = firstItem } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } class ViewController: UIViewController { let tabBar: CustomTabBar = { let tb = CustomTabBar() tb.translatesAutoresizingMaskIntoConstraints = false return tb }() override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .systemBackground view.addSubview(tabBar) NSLayoutConstraint.activate([ tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 25), tabBar.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -25), tabBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor) ]) } } when specifying height in CustomTabBar explicitly... func alignInternalSubViews() { subviews.forEach { subView in subView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ subView.topAnchor.constraint(equalTo: topAnchor), subView.leadingAnchor.constraint(equalTo: leadingAnchor), subView.trailingAnchor.constraint(equalTo: trailingAnchor), subView.bottomAnchor.constraint(equalTo: bottomAnchor), subView.heightAnchor.constraint(equalToConstant: 62) ]) } } What should I need to do in order to get this capsule _UITabBarPlatterView and its subviews resize accordingly?
Replies
3
Boosts
0
Views
1.3k
Activity
Aug ’25
iOS: How to maintain good app icon contrast in grayscale mode?
I’m developing an iOS app, and I’ve noticed that when the user enables Accessibility → Display & Text Size → Color Filters → Grayscale, my app icon loses a lot of visual contrast. The original colored version looks fine, but in grayscale it appears “flat” and harder to distinguish, unlike a pure black-and-white design. What I want to achieve: Ensure the app icon remains visually clear and high-contrast even when iOS renders it in grayscale. Ideally, provide an alternate “high-contrast” app icon version when grayscale mode is enabled. What I’ve tried: Increased color contrast in the original icon design. Added outlines and stronger shapes. Tested with grayscale filters in design tools. Researched Asset Catalog and alternate icons, but found no documented API to detect or respond to grayscale mode. Questions: Is there any API in iOS that allows detecting when the system is in grayscale mode so that I can programmatically switch to an alternate app icon? If not, are there Apple-recommended best practices for designing app icons that still look clear in grayscale? Are there any accessibility guidelines specifically addressing icon design for grayscale or color-blind modes? Additional info: iOS version tested: iOS 17.5 Development in Swift + SwiftUI, using Asset Catalog for icons. I am aware that iOS supports alternate icons via setAlternateIconName, but I haven’t found a trigger for grayscale mode.
Replies
0
Boosts
1
Views
548
Activity
Aug ’25
Maintain app icon contrast when switching to grayscale mode
Context & Issue I am developing an iOS application. My app icon uses colors that are relatively close to each other. When the user enables Accessibility → Display & Text Size → Color Filters → Grayscale (or similar modes), the icon becomes harder to distinguish because it loses color and contrast is reduced. Goal When iOS switches to grayscale mode, I want the app icon to maintain good contrast between its elements so it remains clearly recognizable. What I’ve tried Redesigned the icon with more contrasting colors. Added strokes/outlines, but it still doesn’t look much better in grayscale. Researched how iOS renders app icons when grayscale is enabled, but couldn’t find a way to override or provide an alternative icon. Specific questions Is there any API or mechanism in iOS that allows providing a different version of the app icon when the user has grayscale mode enabled? If there’s no direct API, are there any best practices for designing iOS app icons to ensure good contrast when converted to grayscale? Do we have to design grayscale version for app icon? Thank you!
Replies
0
Boosts
0
Views
440
Activity
Aug ’25
Why my link color changes back to system default on click and hold?
I currently have a custom UITextView that properly changes the color of a link to the custom color I have set, however, when I click and hold the link, and the animation plays that makes the link bigger and creates a boarder around the link before previewing the website, the link changes briefly back to the system default color, and when letting go, it changes back to my custom color. Is there anyway to have the link always be my custom color, even when clicking and holding? struct AutoDetectedClickableDataView: UIViewRepresentable { let text: String let dataDetectors: UIDataDetectorTypes @Binding var height: CGFloat private func dataDectectorValue(_ dataDectecor: UIDataDetectorTypes) -> UInt64 { var checkingTypes: [NSTextCheckingResult.CheckingType] = [] if dataDetectors.contains(.phoneNumber) { checkingTypes.append(.phoneNumber) } if dataDetectors.contains(.link) { checkingTypes.append(.link) } if dataDetectors.contains(.address) { checkingTypes.append(.address) } if dataDetectors.contains(.calendarEvent) { checkingTypes.append(.date) } if checkingTypes.isEmpty { return 0 } let intCheckingTypes: UInt64 = checkingTypes.reduce(0) { result, checkingType in UInt64(result) | UInt64(checkingType.rawValue) } return intCheckingTypes } func makeUIView(context: Context) -> UITextView { let textView = UITextView() textView.dataDetectorTypes = dataDetectors textView.isEditable = false textView.isScrollEnabled = false textView.backgroundColor = .clear textView.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: UIFont.systemFont(ofSize: 16.0), compatibleWith: textView.traitCollection) textView.textColor = UIColor.label textView.adjustsFontForContentSizeCategory = true textView.textContainer.lineBreakMode = .byWordWrapping textView.textContainerInset = .zero textView.textContainer.lineFragmentPadding = 0 textView.translatesAutoresizingMaskIntoConstraints = false textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal) textView.setContentHuggingPriority(.defaultHigh, for: .horizontal) textView.linkTextAttributes = [.foregroundColor: JeromesColors.UILinkColor] textView.tintColor = JeromesColors.UILinkColor for gesture in textView.gestureRecognizers ?? [] { if gesture is UITapGestureRecognizer { gesture.view?.tintColor = JeromesColors.UILinkColor } } return textView } func updateUIView(_ uiView: UITextView, context: Context) { let font = UIFontMetrics(forTextStyle: .body).scaledFont(for: UIFont.systemFont(ofSize: 16.0), compatibleWith: uiView.traitCollection) let color = UIColor.label let attributed = NSMutableAttributedString(string: text, attributes: [ .font: font, .foregroundColor: color ]) let detectorValue = dataDectectorValue(dataDetectors) var matchCount = 0 if !dataDetectors.isEmpty, detectorValue != 0 { let detector = try? NSDataDetector(types: detectorValue) detector?.enumerateMatches(in: text, options: [], range: NSRange(location: 0, length: text.utf16.count)) { match, _, _ in guard let match = match else { return } if match.resultType == .date, let date = match.date, date < Date() { return } else { attributed.addAttributes([ .foregroundColor: JeromesColors.UILinkColor, .underlineStyle: NSUnderlineStyle.single.rawValue, ], range: match.range) matchCount += 1 } } } uiView.attributedText = attributed if matchCount == 0 { uiView.isSelectable = false } else if matchCount > 0 { uiView.isSelectable = true } DispatchQueue.main.async { uiView.layoutIfNeeded() let fittingSize = CGSize(width: uiView.bounds.width, height: .greatestFiniteMagnitude) let size = uiView.sizeThatFits(fittingSize) height = size.height } } }
Replies
0
Boosts
0
Views
248
Activity
Aug ’25
SwiftUI Layout Issue - Bottom safe area being ignored for seemingly no reason.
Hello there, I ran into a very strange layout issue in SwiftUI. Here's the View: struct OnboardingGreeting: View { /// ... let carouselSpacing: CGFloat = 7 let carouselItemSize: CGFloat = 110 let carouselVelocities: [CGFloat] = [0.5, -0.25, 0.3, 0.2] var body: some View { ZStack(alignment: Alignment(horizontal: .center, vertical: .iconToCarouselBottom)) { VStack(spacing: carouselSpacing) { ForEach(carouselVelocities, id: \.self) { velocityValue in InfiniteHorizontalCarousel( albumNames: albums, artistNames: artists, itemSize: carouselItemSize, itemSpacing: carouselSpacing, velocity: velocityValue ) } } .alignmentGuide(.iconToCarouselBottom) { context in context[VerticalAlignment.bottom] } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .top) LinearGradient( colors: [.black, .clear], startPoint: .bottom, endPoint: .top ) // Top VStack VStack(spacing: 0) { RoundedRectangle(cornerRadius: 18) .fill(.red) .frame(width: 95, height: 95) .alignmentGuide(.iconToCarouselBottom) { context in context.height / 2 } Text("Welcome to Music Radar!") .font(.title) .fontDesign(.serif) .bold() Text("Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum Lorem Impsum") .font(.body) .fontDesign(.serif) PrimaryActionButton("Next") { // navigate to the next screen } .padding(.horizontal) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) } .ignoresSafeArea(.all, edges: .top) .statusBarHidden() } } extension VerticalAlignment { private struct IconToCarouselBottomAlignment: AlignmentID { static func defaultValue(in context: ViewDimensions) -> CGFloat { context[VerticalAlignment.center] } } static let iconToCarouselBottom = VerticalAlignment( IconToCarouselBottomAlignment.self ) } At this point the view looks like this: I want to push the Button in the Top VStack to the bottom of the screen and the red rounded rectangle to stay pinned to the bottom of the horizontal carousel (hence the custom alignment guide being introduced). The natural solution would be to add the Spacer(). However, for some reason when I do it, it results in the button going all the way down to outside of the screen, which means that the bottom safe area isn't being respected. Using the alignment parameter in the flexible frame also doesn't work the way I want it to. I suspect that custom alignment guide can cause this behavior but I can't find the way to fix it. Help me out, please.
Replies
3
Boosts
0
Views
339
Activity
Jun ’25
New Design - impact to color use in existing app SwiftUI View
I’ve noticed with the new design language, SwiftUI views appear to not use color as much. Example, color modifiers for List View items like carets. Is this intended and can developers introduce color back into SwiftUI view elements, if desired, like in iOS/iPadOS 18? Specifically, accent color not been used in List disclosure outline carets.
Replies
1
Boosts
0
Views
159
Activity
Jun ’25
iOS 26 not showing new screenshot animation
Hi everyone, I’m currently testing iOS 26 on my iPhone as part of the developer program. According to Apple’s documentation and demo materials, a new screenshot animation was introduced in this version. However, when I take a screenshot on my device, the animation remains the same as in previous iOS versions. I’ve double-checked that I’m running the correct build of iOS 26, and I haven’t found any settings that might enable or disable this feature. Is anyone else experiencing the same issue? Could this new animation be device-specific, region-limited, or require additional configuration? Any insight would be appreciated! Thanks in advance, Alonso Rivera
Replies
0
Boosts
0
Views
352
Activity
Jun ’25
Animating items between a VStack and a ZStack?
Hey there! I'd love to know if theres a way where you can animate items between ZStack and VStacks? Just like the native iOS notifications on the Lockscreen stack at the bottom and if tapped, they convert from a Stack to a List - I have a list with items, displayed in a VStack, and I make the list collapsable when swiping down, where the items stack behind eachother with a progresisve reduction in opacity & scale, but I havent figured out a way to animate the items between the list and the stack - where you can visually see items starting to overlap and stack ontop of eachother when collapsing the list.
Replies
0
Boosts
0
Views
185
Activity
May ’25
Apple greets Global Accessibility Awareness Day with severe accessibility violations on macOS
I'm reposting here my FB17602742, submitted yesterday: The strong wording of this message comes from years of Apple ignoring the needs of users who can't tolerate UI animations and convulsions. At this point, it's clear that Apple is either intentionally harming users like me or simply doesn't care about meeting even the most basic accessibility standards on macOS. Yes, many UI animations and convulsions can, fortunately, be disabled - but not through straightforward UI controls. Instead, users are forced to look for obscure Terminal commands found scattered across the Internet. The "Reduce motion" checkbox in System Settings is simply a fake control that doesn't do anything - instead of actually disabling all UI animations and convulsions. What's worse, two of the most offensive UI animations cannot be disabled at all. Apple has consistently dismissed requests to let users disable the following UI animations: Scroll bar rollover highlight effect (introduced on macOS 10.7.3). Every time the cursor passes over a scroll bar, it gets highlighted. This draws the user's attention to random scroll bars for no reason - just because the cursor happened to pass over them. It results in HUNDREDS of unnecessary, annoying events of distraction daily!
 Expand/collapse animation of NSOutlineView (e.g., when opening/closing folders in the list view in the Finder, or any other app using outline views). This animation is extremely distracting, irritating, and time-wasting. Global Accessibility Awareness Day is approaching. Dear Apple, Please adhere to the most basic accessibility standards. Stop the needless suffering of countless users like me. Let us disable the two aforementioned UI convulsions. Thank you for your attention to the issue.
Replies
0
Boosts
0
Views
246
Activity
May ’25
Scrollview and a background image set to scaledToFill....
I've been beating my head against the wall over a scrollview issue where the top and bottom are cut off in landscape mode. Portrait mode - everything runs swimmingly. The moment I flip the iPad on its side, though, I lose about a quarter of the view on the top and bottom. I thought this was something to do with framing or such; I ran through a myriad of frame, padding, spacer, geometry...I set it static, I set it to dynamically grow, I even created algorithms to try to figure out how to set things to the individual device. Eventually, I separated the tablet and phone views as was suggested here and on the Apple dev forums. That's when I started playing around with the background image. Right now I have.... ZStack { Image("background") .resizable() .scaledToFill() .ignoresSafeArea() ScrollView { VStack(spacing: 24) {.... The problem is the "scaledToFill". In essence, whenever THAT is in the code, the vertical scrollview goes wonky in landscape mode. It, in essence, thinks that it has much more room at the top and the bottom because the background image has been extended at top and bottom to fill the wider screen of the iPad in landscape orientation. Is there any way to get around this issue? The desired behavior is pretty straightforward - the background image fills the entire background, no white bars or such, and the view scrolls against it.
Replies
3
Boosts
0
Views
264
Activity
Apr ’25
Live Activity animate without updating data
Is it actually possible to display animation (even a simple one) on Live Activity? But on these cases: The main app is terminated - of course, I know I can use the main app to keep updating the Live Activity to make simple animations work, but in this case, the main app is killed. Live Activity data is not updating - I also understand that the Live Activity can perform animations when its data is being update via push notification or other means, but the current case is the data is not being updated. I’ve tried several ways to achieve this, but nothing seems to work. Just when I was about to give up, I found this video from Apple’s official channel: https://www.youtube.com/watch?v=m6WMwSj_EbA At 4:14 in this video, you can see the text "Locating Driver" with the breathing animation. Could someone please help me understand how to implement that kind of animation in a Live Activity when: The main app is not running, and The Live Activity data is not updating?
Replies
0
Boosts
0
Views
197
Activity
Apr ’25
iPad/iPhone - Display best practices….
So…I am hitting a wall here and could use some guidance towards best practice. I’ve developed an app in Xcode/SwiftUI that renders just fine on the iPhone - text, images, buttons, frames…everything is nicely centered on the screen or scrolls where and when I want. The iPad though…not so much. I’m having issues with tops and bottoms being cut off in scrollviews. These are just straight up text screens too - the ones with other elements/controls…they’re rendering fine. I’ve tried a mix of geometry, vstack, scrollview, padding, spacers…the lot of it. Nothing I seem to do works - the views do not want to fill and fit properly. And, of course, the issue becomes worse the moment you flip the iPad into landscape view. Or use the 13” models. I’d imagine others are battling these issues as well and found solutions, so I decided to hit up the brain trust.
Replies
3
Boosts
0
Views
406
Activity
Apr ’25
Apple is lying about its commitment to accessibility on macOS
I've just received an email from Apple regarding the Global Accessibility Awareness Day and some forthcoming sessions to promote their accessibility features. What a joke. For many years, Apple refuses to provide the most basic accessibility requirement on macOS: LET USERS DISABLE ALL NON-CONSENSUAL UNSOLICITED ANIMATIONS AND OTHER UI CONVULSIONS. The scourge of animations started from macOS Lion. Yes, many of them can be, fortunately, disabled through some obscure Terminal commands (that is, if the user is lucky enough to discover them on some obscure internet resources). The "Reduce motion" control in System Settings is a fake option that doesn't do anything. And there are two most glaring accessibility violations that cannot be disabled: Scroll bar rollover highlight effect introduced on macOS 10.7.3. Every time you move the cursor over a scroll bar, the bar gets highlighted. It results in bringing the user's attention to random scroll bars for no reason whatsoever just because the cursor happens to pass over the bar at some point. HUNDREDS of unnecessary, annoying events of distraction daily! Expand/collapse animation of NSOutlineView (such as when we open/close a folder in the list view in the Finder, as well as any other app that's using outline views). It's extremely annoying, distracting, and time-wasting. All feedback submitted about this through the years remains mostly ignored (except for a few cases where I received some ridiculous replies from employees who, apparently, are barely familiar with Macs in general). Apple does NOT care about accessibility. Not only this, but it's obvious that Apple is, in fact, intentionally abusing those users who can't tolerate distracting, time-wasting animations and UI convulsions.
Replies
0
Boosts
1
Views
334
Activity
Apr ’25