Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Activity

Why does my website header look different in Safari on macOS compared to Windows browsers?
Hi Developers, I am working on a small project and I noticed that my website header looks different in Safari on macOS compared to Windows browsers like Chrome and Edge. In Safari, the header text and spacing look slightly shifted (screenshot attached). On Windows browsers, everything looks perfectly aligned. Here is my live project for reference: https://gratuitycalculatorae.com/ Screenshot from Safari (macOS): Is this related to Safari-specific CSS rendering? Should I use -webkit- specific fixes or is there a better cross-browser solution? Any guidance or best practices would be really helpful. Thanks
Topic: Safari & Web SubTopic: General Tags:
1
0
123
Sep ’25
Extension in Safari Fails Auth in Non-Default Profile When Using Cookie-Based Mechanism
Hello, We are developing a Safari Web Extension that uses a cookie-based authentication mechanism. The extension makes a request to an endpoint e.g. /login, and this endpoint expects a cookie (e.g., sessionId) to be included with the request. Everything works correctly when running in the default Safari profile. However, when I install and run the same extension in a new, non-default profile, the behaviour changes: The request to /login is still made The cookie sent is not as expected As a result, the response returns null user data I confirmed that logging into the site in the new profile (in a tab) works, but the extension does not appear to share the session/cookie state with the login tab We’ve tried explicitly setting "credentials": "include" in the request but that still didn’t share the cookie in the extension context in the non-default profile. My questions: Is there away to allow cookie-based session sharing between a tab and an extension in non-default profiles in safari? Would switching to a token-based auth mechanism (e.g., Bearer tokens ) be the recommended workaround? I’d appreciate any insights or guidance from those who’ve run into similar issues. 
 Thanks in advance!
Topic: Safari & Web SubTopic: General
0
0
53
Jun ’25
WKWebView: Fullscreen API User Gesture Bypass
Howdy, WKWebView feature request: allow Fullscreen API without User Gestures similar to ElectronJS' userGesture: true flag that allows devs to bypass user gesture restriction for Fullscreen API and similar executeJavaScript(code[, userGesture]) https://www.electronjs.org/docs/latest/api/web-contents#contentsexecutejavascriptcode-usergesture afaik this is allowed because of a fairly recent update to Chromium that also allows users to give Fullscreen API permissions per domain https://chromeos.dev/en/posts/using-the-fullscreen-api-without-gestures Would be greatly useful for a use case in my cross-platform app, so I can avoid rewriting all platforms to use Chromium Thanks
1
0
150
Apr ’25
TLS re-negotiation fails with ios18.4
I'm running apache with following configuration. /cc require TLS client certificate / not require TLS client certificate Starting with ios 18.4, accessing /cc after / fails with following error: AH02261: Re-negotiation handshake failed, referer: https://www.example.com/... SSL Library Error: error:1417C0C7:SSL routines:tls_process_client_certificate:peer did not return a certificate -- No CAs known to server for verification? It seems like ios 18.4 does not support TLS re-negotiation. (It worked with ios 18.3 and before) Is this an expected behavior or a bug?
Topic: Safari & Web SubTopic: General
0
0
141
Apr ’25
Please Help: WKwebview not allowing background audio playback
I’ve been working on a personal iOS project for fun — essentially a YouTube music player, learning how background media playback works in native iOS apps. After seeing that Musi (a famous music streaming app) can play YouTube audio in the background with the screen off — I got really curious. I’ve been trying to replicate that basic background audio functionality for YouTube embeds using WKWebView. I've spent a crazy amount of time (probably 20 hours) trying to figure this out but have achieved no success. Here’s what I’ve tried so far: -Embedding a YouTube video in a WKWebView -Activating AVAudioSession with .playback and setting .setActive(true) -Adding the UIBackgroundModes key with audio in Info.plist -Adding the NSAppTransportSecurity key to allow arbitrary loads --Testing on a real device (iPhone 14, iOS 18.1 target)-- What happens: Audio plays fine in the foreground. If I exit the app and go to the lock screen quickly enough (less than 3 seconds) after pressing play, I can resume playback briefly from the lock screen — but it doesn’t automatically continue like in Musi and other apps like it. Most of the time, the audio stops when the app is backgrounded. I get this error consistently in the logs: Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "(originator doesn't have entitlement com.apple.runningboard.assertions.webkit AND originator doesn't have entitlement com.apple.multitasking.systemappassertions)" It seems like the app lacks some specific entitlements related to WebKit media playback. I don’t have AppDelegate/SceneDelegate (using SwiftUI), but can add if needed. I’m super curious how music streaming apps using youtube as a source get around this — are they doing something different under the hood? A custom player? A SafariViewController trick? Is there a specific way to configure WKWebView to keep playing in the background, or is this a known limitation? Would really appreciate any insight from folks who’ve explored this before or know how apps like Musi pulled it off. Thanks in advance!
0
0
162
Apr ’25
Is it possible to programmatically set macOS notification preferences for an app in Swift?
Hi, I’m working on a Safari extension for macOS, and I’d like the app to use specific system notification settings right after installation. I’m wondering if there’s a way in Swift to programmatically configure the default notification preferences (as seen in System Settings > Notifications > [my app]). Here are the desired settings: Only Desktop – without “Notification Center” or “Lock Screen” Alert Style: Temporary Badge App Icon: Enabled Play Sound for Notifications: Disabled Show Previews: When Unlocked Notification Grouping: Off (I don’t want them to accumulate in Notification Center) Here is the code I’m currently using to display a basic notification: private func handleNotificationRequest(_ message: [String: Any]) { guard let title = message["title"] as? String, let body = message["body"] as? String else { return } UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, error in if granted { self.showNotification(title: title, body: body) } } } private func showNotification(title: String, body: String) { let content = UNMutableNotificationContent() content.title = title content.body = body content.sound = nil // No sound for subtle notification // Create notification that doesn't persist in notification center let trigger = UNTimeIntervalNotificationTrigger(timeInterval: 0.1, repeats: false) let request = UNNotificationRequest(identifier: "fast-url-copy-notification", content: content, trigger: trigger) UNUserNotificationCenter.current().add(request) { error in if let error = error { os_log(.error, "Failed to show notification: %@", error.localizedDescription) } } } OS: macOS 26.0 Thanks in advance, Mateusz
1
0
450
Jul ’25
How to create a thumbnail for tabs like Safari or Chrome?
In the safari or chrome app, when I want to change tabs, I can go into a grid view of the tabs. In this grid, each tab shows the content of the page. When I click on one of the tabs, the content of the page expands to fill the entire screen (and shrinks when I go back to grid). I'm creating my own browser and I'm trying to replicate this same functionality. I'm using WebKit on XCode 16.4, iOS 18. However, I'm unable to figure out how Chrome and Safari did this. First, I thought that I could take a snapshot of the page and then use that image as the thumbnail. However, very often the image is of the wrong size - likely due to the webview shrinking for the animation. Making the animation wait until the image is made available did help in making it more consistent. The above errors happen whenever I spam the new tab and then click the tab grid button. It only is misaligned on the very last new tab. Please help on this. // OpenedTab.swift Button(action: { tab.getThumbnail { tabManager.selectedTab = nil } }) { ZStack { Image(systemName: "square") .resizable() .frame(width: 25, height: 25) Text(tabManager.tabs.count.description) .font(.subheadline) } } // TabState.swift func getThumbnail(completionHandler: (() -> Void)? = nil) { webView.takeSnapshot(with: nil) { img, err in if let err = err { print("Snapshot err: \(err)") } else { self.thumbnail = img completionHandler?() } } } Also, something I'm noticing is that for some reason, the image is slightly bigger than the header of the tab card. It also happens in the progress view if the thumbnail isn't available. The images above show it too. I have no clue why this is happening and I would love advice on this too. struct TabCardView: View { @StateObject var manager = TabManager.shared @ObservedObject var tab: TabState var namespace: Namespace.ID @State var width: CGFloat = 0 var body: some View { GeometryReader { geo in VStack(spacing: 0) { HStack(spacing: 1) { Text(tab.title ?? tab.url.host() ?? "") .font(.caption2) .padding(.horizontal, 4) .padding(.vertical, 10) Button(action: { manager.close(tab: tab) }) { Image(systemName: "multiply") } } .frame(height: 40) .frame(width: geo.size.width) // .padding(.horizontal, 7) .background(.tertiary) .matchedGeometryEffect(id: tab.id.uuidString + "title", in: namespace) ZStack { if let thumbnail = tab.thumbnail { Image(uiImage: thumbnail) .resizable() .aspectRatio(contentMode: .fill) .frame(width: geo.size.width, height: 160, alignment: .top) .clipped() } else { Color.black.brightness(0.8) ProgressView() } } .frame(width: geo.size.width, height: 160) .matchedGeometryEffect(id: tab.id.uuidString + "container", in: namespace) } .frame(width: geo.size.width) } .frame(height: 200) .clipShape(RoundedRectangle(cornerRadius: 16)) .shadow(radius: 2) .padding(.all, 7) .overlay( RoundedRectangle(cornerRadius: 20) .stroke(.blue, lineWidth: manager.previousTab?.id == tab.id ? 5 : 0) ) .shadow(radius: 1) } }
Topic: Safari & Web SubTopic: General Tags:
1
0
785
Jul ’25
iOS Safari 26 select dismiss issue
We are seeing an issue in Safari on iOS 26 where the a automatic unfocus of on select box dismisses the second one. <select name="choice1" onblur="console.log('onblur1');" onfocus="console.log('onfocus1');"> <option value="first">First Value</option> <option value="second" selected>Second Value</option> <option value="third">Third Value</option> </select> <select name="choice2" onblur="console.log('onblur2');" onfocus="console.log('onfocus2')"> <option value="first">First Value</option> <option value="second" selected>Second Value</option> <option value="third">Third Value</option> </select> select something in choice1. quickly tap choice2 before onblur1 is logged. At the timing of onblur1 the selection menu for choice2 is dismissed. Anyone know how to fix this behavior?
Topic: Safari & Web SubTopic: General Tags:
2
0
322
Sep ’25
WKWebView occasionally shows white screen and persists until app restart
I am encountering an intermittent issue with WKWebView in my iOS app. The problem occurs infrequently, but when it does, the WKWebView consistently displays a white screen and remains in this state until the app is forcefully terminated and relaunched. To provide more context, here are the key characteristics of the issue: The white screen problem occurs sporadically and is not easily reproducible. The WKWebView remains unresponsive despite attempts to interact with it. Reloading the webpage or navigating to a different URL does not resolve the white screen issue. The problem persists until the app is terminated and relaunched. This issue is specific to the WKWebView; other components of the app function correctly. The WKWebView renders normally, and the main document synchronously loads resources both offline and online without any issues. The bridge and JavaScript execution also work as expected. However, when interacting with the WKWebView, it becomes unresponsive to user clicks, and the web inspector fails to respond. Additionally, asynchronous network requests also do not receive any response. The problem occurs exclusively on HTTPS pages, whereas HTTP pages load without any issues. Other components, such as workers, function correctly. addUserScript injection during WKWebView creation is effective, and evaluateJavaScript during the page loading process works as expected. However, when the document becomes unresponsive, executing evaluateJavaScript only triggers the callback after the WKWebView is destroyed. I have discovered a reliable method to reproduce the white screen issue in WKWebView. This method involves the following steps and conditions: Create a WKWebView instance. Load an HTML page using the loadRequest method(https url request). Before the WKWebView is attached to the UI (not yet visible to the user), call the evaluateJavaScript function. This issue has occurred in almost all iOS versions, including the latest iOS 17.x version.
4
0
1.7k
Mar ’25
Cancelling the "pick up annotation" animation
While implementing Apple Maps into our web application, I have a scenario where I want to be able to drag and move some of my custom annotations around. While that is working, when "picking up" the annotation before dragging it, there is an animation which I believe is to represent the human interaction of picking up a pin from a map, I would like to cancel that animation and thought that would be possible by calling preventDefault() in the emitted long-press event, which the documentation states that annotations should emit if they are draggable. The thing is that I don't get this event to emit when long pressing an annotation. So I believe that I have found a bug. It's in this paragraph in the documentation https://developer.apple.com/documentation/mapkitjs/handling-map-events#Respond-to-map-interaction-events A long press occurs on the map outside an annotation. A long press may be the beginning of a panning or pinching gesture on the map. You can prevent the gesture from starting by calling the preventDefault() method of the event. Annotations need to be draggable to dispatch long-press events. In anybody else experiencing this or do you see any clear fix for this? Maybe there is another way to cancel that "picking up the annotation for dragging" animation. I have seemed to try anything else.
0
0
110
Aug ’25
Handling POST-based Authentication Flow with ASWebAuthenticationSession and MDM Client Certificate
Hello, I have an authentication flow where my app communicates with a backend protected by F5 client certificate validation. The client certificate is distributed via MDM and is available in the device keychain, but not accessible directly from the app. When using ASWebAuthenticationSession (or SFSafariViewController) Safari can successfully pick up and present the certificate during authentication, so that part works fine. However, the backend’s authenticate endpoint only supports a POST request with an Authorization header, whereas ASWebAuthenticationSession only accepts a GET URL when starting the session. My questions are: How is this type of flow typically implemented in iOS? Should the backend provide a GET-based endpoint that redirects into the POST, or is there a recommended iOS pattern (e.g., an intermediate HTML page that does the POST after certificate validation)? Are there Apple guidelines on handling certificate-based auth with ASWebAuthenticationSession when the API requires POST, especially for In-House distributed apps? Any guidance or best practices would be very helpful.
Topic: Safari & Web SubTopic: General
0
0
361
Sep ’25
window.location.href = 'tel:0216700310'
window.location.href = 'tel:0216700310'; I ran the code in an IOS environment. The number was displayed when the call button on the device appeared. However, other IOS devices besides some devices came out as a number starting with +82, and I received feedback that the call was not connected properly. I wonder what could be caused by only some devices. And I would also like to ask what can be done to allow the numbers on the code to be displayed and called as they are.
Topic: Safari & Web SubTopic: General
0
0
302
Sep ’25
"tel:02-xxxx-xxxx" alert
window.location.href = "tel:02-xxxx-xxxx" Can the development team modify the screen text? Or can the country code be erased? What are the reasons for continuing to be "on the phone" if the country code is automatically attached to the phone like this?
Topic: Safari & Web SubTopic: General
1
0
800
Sep ’25
ssl error iPadOS 18.4 for self-signed certificate
Our app is an enterprise app via MDM. We are experiencing an issue in iPadOS 18.4 when loading an internal HTTPS server via WKWebView in a hybrid iOS app. Our server uses a self-signed certificate but lacks the digitalSignature usage in its Key Usage extension. (Currently we have no chance to change the server's certificate) We override webView:didReceiveAuthenticationChallenge:completionHandler: to trust the certificate: completionHandler(NSURLSessionAuthChallengeUseCredential, credential); This "completionHandler" works in previous 18.3.2 , but not work in 18.4. May I know is there any changes in 18.4 for the https certification? Why this delegate not work? What we can do to ignore this ssl error and get connection? Thanks in advance, look forward for your reply.
1
0
189
Apr ’25
Apple Pay button not showing up in apple pay demo site.
MacOS: 12 ( Monterrey ) Safari: 17.6 Demo Site: https://applepaydemo.apple.com/ At the bottom where the Apple Pay button should appear, I see a warning something like "This browser doesn't support Apple Pay, please use safari" along with a link to requirements for apple pay. All the requirements are fulfilled, OS and Safari's version are above the minimum required. Link was opened in Safari. And the other thing is if I open the same site in Chrome, I can see the apple pay button and when I click on it a QR appears which is the expected behaviour. How to resolve this?
0
0
244
Sep ’25
When loading a .webarchive in WKWebView does it handle local storage differently in iOS 18?
I have multiple web views of the same domain that share the same local storage, as expected. One of them though, is loading a .webarchive file. The web archive is of the same domain, and is loaded using the same base URL. For some reason, in most cases, the local storage is not shared with this web view when loading the web archive, although if I make that same web view load the actual live web page it does share local storage. I say in most cases, because for some users it works as expected, but for a significant portion of users it isn't sharing local storage. I think that the main difference between working and not is iOS version. iOS 17 seems to be able to share the local storage but iOS 18 does not. I can't find anything related in the release notes of iOS 18 versions. There is nothing in the documentation for load(_:mimeType:characterEncodingName:baseURL:), or the header file, that explains anything specific about local storage and webarchive loading. Does anyone know for sure how local storage is handled when a webarchive is loaded into a web view, and did something change with iOS 18 in regards to this?
0
0
119
Apr ’25
Parse error in WebAssembly code only in Safari
I have compiled some Java code to WebAssembly via TeaVM and wrapped it in a PWA. The resulting code runs nicely in Firefox and Chrome but throws an exception in Safari. CompileError: WebAssembly.Module doesn't parse at byte 1657: invalid extended GC op 24, in function at index 2251 Can anybody tell me what's wrong with that code? I mean it can't be so bad if Firefox and Chrome can parse and run it without problems. I am using the most recent versions of all browsers and the offending code can be found here: Run the demo via: https://mpmediasoft.de/demos/Emmentaler/Emmentaler-Demo-TeaVM-Wasm/index.html The offending wasm file is: https://mpmediasoft.de/demos/Emmentaler/Emmentaler-Demo-TeaVM-Wasm/tvw/ModelBridgeTeaVM.wasm With Safari the demo just shows some empty space instead of a complex polygon. You can see the error in the javascript console of Safari.
Topic: Safari & Web SubTopic: General
0
0
419
Jul ’25