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

iOS 26/MacOS 26 - PWA App Icons: Dark,Clear,Tinted Appearance
Hi everyone, I'm exploring the new app icon appearance options (Clear, Dark, Tinted) for Progressive Web Apps (PWAs) on iOS26, iPadOS26, and macOS26. Currently, PWA icons don't seem to render well with these new appearances, particularly in Clear and Tinted modes, resulting in very very poor visual quality. You can hardly see anything. Has support for these icon appearances been fully implemented for PWAs? If so, could someone point me to the relevant Apple Developer documentation or provide guidance on how to configure PWA icons to support Clear, Dark, and Tinted appearances? I've searched the Apple Developer Forums, Stack Overflow, and Reddit but haven't found clear information on this topic.A possible solution is a png file with transparent areas, but if the pattern is dark, nothing will be visible in dark mode. Any insights or resources would be greatly appreciated. Thanks! (plz don't give up on PWA😭) Reference: https://developer.apple.com/forums/thread/761615 https://stackoverflow.com/questions/78780916/is-there-a-way-to-provide-light-dark-and-tinted-variants-of-apple-touch-icon https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
0
2
509
Jun ’25
Safari and Word Press clash on i Phone
I have a website that has been built in Wordpress and hosted on wordpress engine. In testing now and on the i phone with safari browser it keeps crashing after short time 2/3 minutes, content does not display properly pages go blank etc. Has anyone experienced this /have a solution? Thanks
Topic: Safari & Web SubTopic: General Tags:
0
0
166
Jul ’25
How to inspect WKWebExtension with a extension service worker
iOS 18.4 introduces the new WKWebExtension API to support extensions in WKWebView. However, for extensions that have migrated to Manifest V3 and use an extension service worker as the background script, it's currently not possible to inspect them through Safari. This is only thing I can see, I don't know how to inspect the details of the "background.js" I'm wondering—has this changed? Is it now possible to inspect extension service workers?
0
0
81
Apr ’25
Safari: Keyboard Focus for Scrollable Containers
Problem Safari requires tabindex="0" for keyboard access to scrollable containers. Chrome (v130+) and Firefox (v4+) handle this automatically. Current Behavior Chrome/Firefox: Scrollable div with overflow: auto → automatically keyboard-accessible (Tab to focus, Arrow keys to scroll) Safari: Same element → NOT keyboard-accessible unless: Add tabindex="0", OR Container has focusable children Workaround <div style="overflow-y: auto; height: 300px;" tabindex="0"> <!-- content --> </div> Issue: Adds unnecessary tab stops on Chrome/Firefox where not needed. Request Will Safari support auto-focus for scrollable containers? (matching Chrome/Firefox) If not planned: Any official Apple guide for cross-browser scrollable accessibility? Timeline? If on roadmap, estimated Safari version? Can I subscribe for updates? Use Cases Dropdown menus Modal dialogs Tab panels Data tables Chat interfaces Reference: WCAG 2.1 Keyboard Accessible: https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html Example component: https://www.radix-ui.com/themes/docs/components/scroll-area
0
0
223
Dec ’25
Issue with Fetching Device ID from Localhost on iOS (HTTPS Request Conflict)
We are currently running a lightweight server within our iOS mobile app to pass a unique device ID via localhost for device-based restrictions. The setup works by binding a user's email to their device ID upon login, and later, when they attempt to log in via a browser, we retrieve this ID by making a request to http://localhost:8086/device-info. However, we're encountering an issue when making this request. Here’s the error message: Error fetching device info: TypeError { } r@webkit-masked-url://hidden/:27:166011 value@webkit-masked-url://hidden/:27:182883 @webkit-masked-url://hidden/:27:184904 We are making this request from an HTTPS website, and we suspect this could be related to mixed-content restrictions. Could you guide us on how to properly make localhost requests over HTTPS, especially in a production environment with the necessary security measures? Any insights or best practices on resolving this issue would be greatly appreciated.
0
0
432
Feb ’25
Payment Method: redicrecting safari to use toss
Hello I am trying to release an app, dealing with storing, delivering, and maintaining outdoor activity euqipememts. On web, I used widget provided by TOSS, which is a Korean banking application. Due to lack of time I have use lazy method User taps the “Pay” button ↓ Backend generates a payment URL (Toss Payments) ↓ Open the payment page in an external browser (Safari) ↓ User completes the payment in Safari ↓ Return to the app via deep link (borini://payment/success) ↓ Call the payment approval API ↓ Display the payment completion page I have hear such method is possible for our type of service which deals with real life goods. So I would love to know if it is actually possible or will I have to make a new payment method using apple provided payment method in order to pass APP Store Connect review before releasing application
0
0
49
Nov ’25
Frontend Does Not Display Password Validation Error (e.g., “Password Cannot Contain Your Name”)
Description When creating an Apple ID via the web form, if the user’s chosen password contains their own name, the server correctly returns an error (e.g., "Password cannot contain your name") in the PUT request's JSON response. However, this error is not shown on the frontend, leaving users unaware of why the form silently fails or stalls. Steps to Reproduce Go to the Apple ID account creation page (https://appleid.apple.com/account). Enter valid account details where the password includes the user's first or last name (e.g., Johnacb2331!l for a user named John Doe). Complete all fields, including phone number verification and captcha. Submit the form and monitor the Network tab in your browser’s DevTools. Observe that the form appears to hang, loop, or silently fail. Open the PUT request to /account — the response JSON will contain the relevant validation error (e.g., “Password cannot contain your name”), but the user is not shown this. Expected Behavior The password validation error (e.g., containing the user’s name) should be immediately displayed in the UI next to the password field to inform the user and allow for correction. Actual Behavior No error is shown in the UI. The form appears to fail silently, leaving the user confused. The actual reason for failure is only visible through browser developer tools in the PUT response payload. Impact This can lead to: User frustration and confusion Increased support overhead Poor UX in a critical flow (account creation) Environment Browser: chrome 136.0.7103.114 Platform: Web (https://appleid.apple.com) Date observed: 31/5/25 Suggested Fix Ensure that password validation messages from backend responses surface in the frontend, especially for common user input issues like including names in passwords. No screenshots as I can not create a new account
Topic: Safari & Web SubTopic: General
0
0
139
Jun ’25
-webkit-touch-callout: none; not working in Safari on iOS 26.1
Hi everyone, I want users not to see the system context menu when long-pressing text on a page in Safari on iOS. I found on MDN that the CSS property -webkit-touch-callout: none; can achieve this. But in reality, it doesn't really work. MDN documents URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-touch-callout Here’s a minimal example: function preventIOSSafariContextMenu() { if (document.getElementById(STYLE_ELEMENT_ID)) return; if (!IS_TOUCH_DEVICE) return; const style = document.createElement("style"); style.id = STYLE_ELEMENT_ID; style.textContent = ` html, body { -webkit-touch-callout: none !important; } `; (document.head || document.documentElement).appendChild(style); } The context menu persists. Has anyone else encountered this? Is this an intentional change in WebKit, or could it be a regression? If it’s intentional, is there a recommended alternative? Thanks in advance for any insights!
0
0
581
Nov ’25
Missing Cookies in Set-Cookie Header in webRequest.onHeadersReceived callback in Safari Web Extension
We’re seeing an issue in our Safari Web Extension where not all cookies from the Set-Cookie response header are accessible. We are using macOS 15.4 and Safari 18.4. In the webRequest.onHeadersReceived callback, the Set-Cookie header returned by Safari only includes some of the cookies set by the server. If multiple Set-Cookie headers are present, we seem to receive only a partial list, some cookies are missing entirely. In Chrome and Firefox, the same callback provides all cookies set by the server without issue. We are looking for assistance in fixing these issues and having our Safari Extension function the same as it does in Firefox and Chrome.
0
1
194
Apr ’25
input type="file"でアップロードした画像のGPS情報
input type="file"でアップロードした画像データからGPS情報が除去されます。 こちらはiPadOS16.5.1で発生しておりました。 iPadOS17.4.1、iPadOS18.3では正常にGPS情報が保持されます。 iOS、iPadOSのアップデートでGPS情報を保持するよう修正されたと見受けられますが、リリースノートを参照しても上記修正についての記事を見つけられませんでした。 お手数ですが、上記修正に該当する記事をご教示頂けませんでしょうか。 どうぞよろしくお願い致します。
0
0
433
Feb ’25
SFSafariApplication doesn't transmitt messages to docked website.
Hi! I'm working on a web extension for Safari and I need to send messages from the containing application to JavaScript. For this I use the method class func dispatchMessage( withName messageName: String, toExtensionWithIdentifier identifier: String, userInfo: [String : Any]? = nil ) async throws of the SFSafariApplication class. If the site is opened in Safari in normal mode, everything works as expected. However, if the site is "docked", the messages are not transmitted to this "Web App".
0
0
89
May ’25
Duplicate Smart App Banners in Safari when App Is Installed
Issue: On Safari, two Smart App Banners appear for the same webpage when the iOS app is installed. Cause: • Banner 1: Native Apple Smart App Banner, automatically triggered by Safari via AASA / Universal Links. • Banner 2: Smart banner injected by a third-party SDK (Branch.io). • Both operate independently, resulting in duplicate banners. Finding: Safari’s native Smart App Banner behavior is system-controlled and cannot be disabled programmatically using web rules or JavaScript while Universal Links are enabled. Question: Is this behavior expected by design? Is there any Apple-supported way to suppress the native Smart App Banner when using a third-party banner, or is the recommended approach to rely on only one banner system?
0
0
57
1w
Simulator 18.4 Webview CORS issues
I have a very specific issue that happens only on iOS Simulator version 18.4. It does NOT happen when I run my app on a real iOS 18.4 device through Testflight. My app displays a WebView (courtesy of Capacitor, url scheme capacitor://). Inside that Webview I'm using Firebase JS API (11.2.0) and calling signInWithEmailAndPassword, which works well in all other contexts, i.e. browser, Android webview, iOS webview in all other Simulator versions, and on real devices. Only when running in Simulator 18.4, I get a failed network request: cannot parse response Fetch API cannot load https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?... due to access control checks. Failed to load resource: cannot parse reponse error: FirebaseError: (auth/network-request-failed) Everything is working correctly for both: Capacitor app webview installed on a real 18.4 device with Testflight Safari (non-webview) in the 18.4 Simulator The issue is severe for us, because we are unable to develop our app and test it in the simulator on 18.4 Simulator before pushing it through Testflight internal release. Request headers on the failed request (no response status or headers available). Request Accept: / Content-Type: application/json Origin: capacitor://localhost Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: cross-site User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4 like Mac OS X) - AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 X-Client-Version: Mobile/JsCore/11.2.0/FirebaseCore-web X-Firebase-Client: (...)
0
1
288
Apr ’25
iOS 26 WKWebView PDF Background Color Changed to Gray
Hello We've encountered an issue with WKWebView in the latest iOS 26 beta. When loading a PDF URL, the background of the PDF viewer now displays as a dark gray instead of the expected white. Device: iOS 26 Simulator/Device Component: WKWebView Issue: The background color of the loaded PDF is gray. Expected Behavior: The background should be white, as it has been in all previous iOS versions. Link for Testing: https://help.apple.com/pdf/security/en_US/apple-platform-security-guide.pdf We confirmed that the same PDF and code render with a white background on iOS 26 and earlier. Questions: Is this an intentional change in iOS 26's WKWebView? If so, is there a new property or configuration setting available to control the background color of the PDF viewer within WKWebView? We would like to have the ability to set it back to white. Any insights, workarounds, or information on this matter would be greatly appreciated. Thank you.
0
1
308
Nov ’25
Safari Extension Error: “Non-persistent background content cannot listen to webRequest events.” after macOS 15.4 / Safari 18.4 Update
Safari Extension Error: “Non-persistent background content cannot listen to webRequest events.” after macOS 15.4 / Safari 18.4 Update We’re seeing the following error in the Safari Extensions tab after updating to macOS 15.4 and Safari 18.4: “Non-persistent background content cannot listen to webRequest events.” This error did not appear prior to the update, and we haven’t found any official documentation stating that webRequest API is no longer supported in Safari. In our extension (Manifest V3), we are using the webRequest.onHeadersReceived callback to intercept response headers and read updated cookies. While the functionality itself still works as expected. we’re able to access the response headers and this error is now shown in the Extension settings page. We are not seeing this issue in other browsers (Chrome, Firefox) using the same Manifest V3 setup. Is there any plan to deprecate webRequest support in Manifest V3 for Safari? We’d appreciate any clarification or guidance on how to handle this going forward.
0
0
252
Apr ’25
Universal Links not opening my app.
My app has been published by 2 months now I still I cant get Universal Links to work. I checked a lot of docs as well as videos about setting up universal links. Everyone with clear steps: Add the well-known json file to the server. Already validated by AASA web validator. Add the Associated domain on project capabilities, with the Web page root only. Eg: applinks:example:com. Install the app and trying clicking a link from notepad. Or instead make a long press to deploy contextual menu to see if my app is on the selectable options to open the link. My app is not been open in any of my attempts and the console always trying to use safari. I had a couple of screenshots of my testing. I really need help with this.
0
0
306
Nov ’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
135
Apr ’25
Allow Safari and WKWebView to repaint during resize.
As the title suggests, given today’s overpowered device performance, shouldn’t Safari and WKWebView allow repainting during window resizing? Currently, all WKWebView-based apps pause page rendering during resize. When a user double-clicks the drag region, the sequence goes: pause rendering → enlarge or shrink the window → leave a blank area → repaint the page. The whole process feels inelegant—especially on devices that support ProMotion.
Topic: Safari & Web SubTopic: General Tags:
0
0
175
Nov ’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
144
Apr ’25
Selenium reports an error when taking screenshots during tests on Safari
We attempted to perform automated testing (using Python) on an 11th generation iPad (iPad A16) using Selenium 4.38.0, but we were unable to capture webpage screenshots using the function "driver.save_screenshot(filename)". However, this issue did not occur on an iPad Air 4. During our debugging of the "WebDriver.py" script, we found that after issuing the screenshot command, a status value of 500 was returned, accompanied by an "unknown error". We have communicated with the Selenium team and provided the main Python code(https://github.com/SeleniumHQ/selenium/issues/16555). They suggested that the problem likely lies within the SafariWebDriver, rather than in the "remote_webdriver.py" file. Additionally, we tried using the SafariWebDriver provided by Safari Technology Preview, but the problem persisted.
0
0
310
Nov ’25