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

General Documentation

Posts under General subtopic

Post

Replies

Boosts

Views

Activity

Video on Safari iOS - UI/UX of Shadow Content User Agent
Hi, when I display an HTML page with a on Safari iOS, I get a nice UI. Great! At the first look I see a video frame with an arrow-in-a-circle button in the middle. Very nice. I click on the arrow and I get a fullscreen view while the video begins to play. I watch the video then I pause it then I click on the top-left x button. So I go back to my html page and the video is perfectly there as it was before. But, there is an annoying new detail. The video frame is really dark, it still presents all the controls and a "different" arrow button to play it again. In other words that nice video-frame, that nice picture, is not longer visible on the page. That nice page with nice pictures has now an almost-black rectangle. Too bad. Sure I can click on the video (outside the controls) then the controls and the black overlaying frame disappear. I can see that nice picture again. Finally. Well, but the arrow-in-a-circle button to play the video disappeared. Now the user cannot longer understand that's a video to play. It looks just like any other pictures to admire statically. Is any way to get the previous first look of the video? The one clear, with the current frame and the arrow-in-a-circle look?
0
0
188
Apr ’25
Issue with Declarative Net Request Rule (DNR) Persistence Across Redirects in Safari
When a DNR rule is set for a specific URL and the request receives a server-side redirect (e.g., 302) to a different URL that does not match the urlFilter, the rule still seems to apply to the redirected request. We are using macOS 15.4 and Safari 18.4. For example, consider two sequential calls: call1 and call2. call1 triggers a 302 redirect to call2. A DNR rule is created to add a "Cookie" header to call1 based on its URL. Unexpectedly, the same cookie is also added to call2, even though call2's URL does not match the rule's urlFilter. This results in the Set-Cookie response from call1 being ignored, and call2 receiving the manually set cookie instead—leading to incorrect behavior. This issue doesn't occur in Chrome or Firefox, where the rule is not applied to the redirected request if the URL no longer matches. 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
0
132
Apr ’25
Repeated Camera Permission Prompts in Web App on Safari (iOS)
Hi everyone, We're building a web application using Next.js that captures around 40 images across different routes as part of a guided user flow. At the beginning of the process, we explicitly request camera permission using navigator.mediaDevices.getUserMedia(...), and the user grants it successfully. However, as users proceed through the flow (navigating between routes), Safari on iOS intermittently re-prompts for camera access—despite the initial permission already being granted and the origin (domain) remaining unchanged. This repeated prompting interrupts the user experience significantly. What we’ve tried: Ensuring camera access is requested only once and reused where possible. Using persistent media stream across routes (where feasible). Testing across different iOS versions to confirm consistency. Questions: Is there a known workaround or best practice to persist camera access across route transitions in a SPA/PWA context on iOS? Are there any Safari-specific behaviors or restrictions related to WebRTC / getUserMedia we should be aware of? Would embedding the camera view in an iframe or maintaining a persistent component help avoid re-prompting? Any guidance or shared experience would be greatly appreciated. Thanks in advance!
Topic: Safari & Web SubTopic: General
0
0
73
Jun ’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
88
May ’25
新しいWebViewにおいてが動作しない
現在新しいWebViewを使ってwebページを読み込むiPadプログラムを作成中ですが、読み込んだ後に部分のボタンをタップしても何も起こりません。safariで通常通りページを開いてボタンをタップするときちんと写真ライブラリ・カメラで撮るなどのポップアップが表示されます。下記がコードです。Webページは単純化のためにのみを配置しています。 struct SwiftUIWebView: View { @State private var webPage = WebPage() private let url = URL(string: "https://www.****.com/")! var body: some View { WebView(webPage) .onAppear { // URLを読み込む webPage.load(URLRequest(url: url)) } } } 何か追加のコードが必要なのでしょうか?
0
0
197
Aug ’25
Worker load was blocked by Cross-Origin-Embedder-Policy
Hello, I am developing a website which starts a web worker using the js code: const zarrWorker = new Worker('./zarr_file.js', { type: 'module' });. The script 'zarr_file.js' is served from the same origin with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin and it is importing external modules through the import statement (e.g. import * as zarr from "https://cdn.jsdelivr.net/npm/zarrita/+esm";). All the external modules are blocked by Safari with the error Worker load was blocked by Cross-Origin-Embedder-Policy, although I can see (by running curl on them) that they correctly set cross-origin-resource-policy: cross-origin`. The same website works fine in Chrome and Firefox. Is it a bug or is Safari implementing stricter policies? In the latter case what would be the solution?
0
0
128
Aug ’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
101
Aug ’25
Incorrect page zoom after pinch-to-zoom and orientation change on Bing search page
Steps to Reproduce: Open the Bing search page in Safari (example URL: https://www.bing.com/search?q=webkit&form=APIPH1&PC=APPL). Pinch-zoom in or out, then return the page to exactly 100% zoom. Rotate the device from portrait to landscape orientation. Observe that the page is incorrectly scaled to a value other than 100%. Rotate the device back to portrait orientation. The page remains at the incorrect zoom level. Expected Result: After returning the page to 100% zoom, changing orientation should keep the zoom level at exactly 100% in both portrait and landscape modes. Actual Result: After returning to 100% zoom, rotating to landscape changes the zoom to a non-100% value, and rotating back to portrait retains the incorrect zoom level.
Topic: Safari & Web SubTopic: General Tags:
0
0
122
Aug ’25
Content overlapping address bar after clicking links in Safari with the one-tab bar enabled
Title: Content Overlapping Address Bar After Clicking Links in Safari, tested on iPhone 11 (iOS 18.1.1) Description: When browsing in Safari on iPhone (iOS 18.1.1), the one-tab bar (address bar) collapses as expected when scrolling down a page. However, after clicking on a link and loading the next page, the content appears to overlap the collapsed address bar. This results in parts of the content being hidden or obscured by the address bar, which affects the user experience, especially on mobile devices with limited screen space. This issue is reproducible on Next.js applications and can be observed on websites such as rotterdam.nl and halderberge.nl. Steps to Reproduce: Enable the One-Tab Bar: Go to Settings > Safari and enable the one-tab bar feature. Open the website rotterdam.nl or halderberge.nl in Safari on an iPhone 11 (iOS 18.1.1). Scroll down the page so that the top address bar collapses. Click on any link on the page to load a new one. Once the new page loads, observe that the content appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured. Expected Result: The content should not overlap or be hidden behind the collapsed address bar after the page reloads. The layout should adjust properly without interference from the address bar, providing a smooth user experience. Actual Result: When the new page loads, the content overlaps or appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured. Device(s) Affected: iPhone 11 running iOS 18.1.1. OS Version: iOS 18.1.1 Technical Notes: To address this issue, the following solutions have been attempted with no success: Viewport Meta Tag: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> This was added to help ensure proper layout on mobile devices, but did not resolve the issue. CSS Safe Area Insets: body { padding-top: env(safe-area-inset-top); } This CSS rule was applied to account for the safe area and prevent content from being hidden under the address bar, but it did not solve the overlapping issue. Scroll Position Adjustment (for scroll-to-top button): Adjusting the scroll behavior by changing the scroll position to {top: 1} instead of {top: 0} was a successful workaround to keep the address bar collapsed when clicking the "scroll to top" button. However, this did not resolve the issue when navigating between pages or changing routes, where the content still overlaps the collapsed address bar.
0
2
551
Feb ’25
XMLHttpRequest cannot load https://demo2.artios.cz/app37g/v105/php/endpoint.php due to access control checks
Hi, we are experiencing a strange issue with our Web App. Our web app runs entirely on the same domain , and we are making several AJAX requests to the same server. The Error occurs only on Iphones, the app works completely fine on androids and computers. Most of the requests work fine, but suddenly, one specific request always fails with the following error: XMLHttpRequest cannot load https://demo2.artios.cz/app37g/v105/php/endpoint.php due to access control checks What we have checked so far: ✅ CORS headers seem correct. Also we operate entirely on the same domain, client and server. ✅ The same request works fine in computer and android devices. ✅ The issue occurs only on iPhone (tested on Chrome and Safari). ✅ Some requests to the same endpoint pass, but suddenly, this specific request always fails. ✅ There is no OPTIONS preflight request logged in the network tab, but we use only simple requests. ✅ We are making a POST request with multipart/form-data. What is Your advice, or where I can find more info about this error? We do not think the CORS is the problem. We have tried to inspect with WebInspector but with no relevant answers. Thank You very much!
0
1
602
Feb ’25
Safari Web Extension service_worker failed to load
I built and extension for chrome, edge, and firefox. I'm porting the chrome extension to safari using the safari-web-extension-converter tool. This has worked successfully and I was able to publish my extension to the app store. I made some updates to the service worker code recently and I'm now being hit with an error when trying to load my unsigned extension into safari: The service_worker script failed to load due to an error. I've looked online at some other forums and haven't found anything helpful around how to debug this kind of error. Because the service worker is non-persistent in safari, I don't have access to the console logs of the service worker through the Develop > Web Extension Background Context menu. Has anyone successfully debugged this kind of error? Are there logs I can pull directly from safari that would help me here? Thanks in advance for the help!
0
0
320
Feb ’25
Why does NSURLSession with Multipath entitlement seamlessly switch to cellular when on a hardware Wi-Fi with no internet, but WKWebView does not?
正文:大家好, 当设备连接到没有互联网的 Wi-Fi SSID(例如,硬件设备的 AP)时,我看到 NSURLSession(multipathServiceType = NSURLSessionMultipathServiceTypeInteractive)和 WKWebView 之间的行为存在令人费解的差异。我正确启用了多路径授权,在这种情况下: NSURLSession 请求会自动回退到蜂窝网络并成功(无需用户干预,快速切换)。 WKWebView 加载失败或停滞:Web 内容未出现,即使系统网络路径得到满足并确认了真正的 Internet 可访问性,Web 视图似乎也没有使用蜂窝路径。 环境: iOS 版本:(例如 iOS 18.4) 设备:(例如 iPhone 15 Pro) 多路径权利:在应用程序中启用,使用 NSURLSessionMultipathServiceTypeInteractive 连接的 SSID:硬件设备 Wi-Fi,无需外部互联网 预期回退:一旦 Wi-Fi 没有互联网,就会自动到蜂窝网络,如 NSURLSession 所观察到的那样 我做了什么/观察到什么: 使用多路径的 NSURLSession 按预期工作:NSURLSessionConfiguration *cfg = [NSURLSessionConfiguration defaultSessionConfiguration];cfg.multipathServiceType = NSURLSessionMultipathServiceTypeInteractive;NSURLSession *session = [NSURLSession sessionWithConfiguration:cfg];NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:@“https://www.apple.com/library/test/success.html”]];NSURLSessionDataTask *task = [session dataTaskWithRequest:req completionHandler:^(NSData *data, NSURLResponse *resp, NSError *err) { NSLog(@“NSURLSession result: %@, error: %@”, resp, err); }];[任务简历];连接到设备 Wi-Fi(无外部 Internet)时,会话会悄悄地切换到手机网络并成功完成。 相同情况下WKWebView加载失败:[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@“https://www.apple.com/library/test/success.html”]]];Web 视图要么显示负载失败,要么只是挂起,即使较低级别的监视报告网络路径已满足并且真正的 Internet 连接可用。 网络路径监控逻辑: 我使用 C API nw_path_monitor来监视nw_path_status_satisfied。 一旦观察到满意,我就会使用nw_connection(例如,连接 tohttps://www.apple.com/library/test/success.html)执行真正的连接检查,以验证真实的互联网流量是否可以通过蜂窝网络流动。 该检查通过,确认回退到手机网络,但 WKWebView 仍不会加载内容。同时,相同条件下的 NSURLSession 请求会立即成功。 示例日志记录跟踪:[+] nw_path_status_satisfied=1, hasWiFi=1, hasCellular=1 [+] Internet 连接测试:准备就绪(通过 nw_connection) [-] WKWebView 加载失败/停滞 [+] NSURLSession 请求成功完成 问题: 为什么当 Wi-Fi 没有 Internet 时,具有多路径服务类型的 NSURLSession 无缝使用蜂窝网络,但 WKWebView 不表现出相同的回退行为?WKWebView 是否不以相同的方式接受系统的多路径回退?在这种情况下,它是否使用不同的网络堆栈或忽略多路径授权? 是否有一种受支持的方法可以强制 WKWebView 像 NSURLSession 一样运行? 例如,我是否可以通过启用多路径的 NSURLSession 桥接内容,并通过自定义方案将其注入 WKWebView? 是否有任何 WKWebView 配置标志、首选项或策略启用相同的自动接口切换? 与原始 NSURLSession 相比,WKWebView 处理网络接换、路径满意度或多路径的方式是否存在已知限制或记录在案的差异? 我排除/尝试过的: 已验证多路径授权是否包含且处于活动状态。 确认的网络路径“满足”,并且在调用 [webView loadRequest:] 之前,真正的 Internet 可访问性成功。 将 WKWebView 加载延迟到连接验证之后。 观察到 NSURLSession 请求在相同的连接条件下成功。 任何对内部差异、推荐的解决方法或 Apple 推荐的模式的见解,以使 Web 内容在“没有互联网的 Wi-Fi”+ 自动回退到蜂窝场景中变得健壮,我们将不胜感激。 谢谢!
Topic: Safari & Web SubTopic: General
0
0
136
Aug ’25
Unclear interimResults Web Speech API implementation in Safari iOS (WebKit)
Hi all! I have been working on a web speech recognition service using the Web Speech API. This service is intended to work on smartphones, primarily Chrome on Android and Safari (or WebKit WebView) on iOS. In my specific use case, I need to set the properties continuous = true and interimResults = true. However, I have noticed that interimResults = true does not always work as expected in WebKit. I understand that this setting should provide fast, native, on-device speech recognition with isFinal = false. However, at times, the recognition becomes throttled and slow, yielding isFinal = true and switching to cloud-based recognition. To confirm whether the recognition is cloud-based, I tested it by disabling the internet connection before starting speech recognition. In some cases, recognition fails entirely, which suggests that requiresOnDeviceRecognition = false is being applied. (Reference: SFSpeechRecognitionRequest.requiresOnDeviceRecognition) I believe this is not the expected behavior when setting interimResults = true. I have researched the native services used by the Web Speech API on iOS devices, and the following links seem relevant: • SFSpeechRecognizer • SFSpeechRecognitionRequest.shouldReportPartialResults • SFSpeechRecognizer.supportsOnDeviceRecognition • Recognizing speech in live audio • Apple Developer Forums Discussion I found that setRequiresOnDeviceRecognition and setShouldReportPartialResults appear to be set correctly, but apparently, they do not work as expected: WebKit Source Code
0
0
389
Mar ’25
Apple Pay Merchant validation Url - ambiguous API documentation
Hello, I was going through the Apple Pay API documentation and noticed ambiguity on the exact process to complete merchant validation. One of the documentation mentions that the validation url will be Your server posts a request using mutual TLS (mTLS) by calling the Apple Pay server’s Payment Session endpoint. Endpoint (Global) POST https://apple-pay-gateway.apple.com/paymentservices/paymentSession Endpoint (China region) POST https://cn-apple-pay-gateway.apple.com/paymentservices/paymentSession Referencing the url: https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/requesting_an_apple_pay_payment_session whereas the other references that the value should be used as provided by the onvalidatemerchant event object with the property validationURL. Refer: https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/providing_merchant_validation Can someone confirm which is the correct approach to follow ?
0
0
411
Feb ’25
Enable iCloud Keychain Autofill & Touch ID support for Chromium-based browsers on macOS
Hello Apple Developer Team, I would love to see iCloud Keychain Autofill and Touch ID support extended to Chromium-based browsers on macOS (such as Ecosia, Brave, or Vivaldi). Currently, Safari allows autofill of passwords using Touch ID, but when using other browsers, I have to manually copy-paste credentials from Keychain Access, which is time-consuming. Would it be possible for Apple to provide an API or framework that allows non-WebKit browsers to integrate iCloud Keychain autofill while keeping security intact? This feature would make macOS more convenient for users who prefer alternative browsers while keeping security standards high. Thanks in advance for considering this! Best regards, Kilian
0
0
349
Mar ’25
The first four tab bars of Safari are hidden
There is no problem with the content display of each tab, but the tab bar is completely buggy. If you open 5 or more tabs and browse tabs after the 5, the first 4 tab bars will be completely blacked out, and you don't even know how many tabs you have. If you click on the place where the tab title probably exists, the tab is displayed as if the partial display of the tab bar has been restored. There is no problem with content display. But because it is unclear what tab is open, the browsing experience is at its lowest. If you switch to the tab after the 5th, the first 4 will return to the blackout state again. Of course, it is the latest software configuration at the moment. There is no shortage of memory at 24GB. I recently started developing a Safari extension with AppExtension, but is that due to it?
Topic: Safari & Web SubTopic: General
0
0
58
Apr ’25
WKWebView + Cookie
Description: In our app, we have login page which displayed in WKWebView. In that page, there is an Remember my Device cookie option which user can select, so next time it OTP page will not be displayed. Problem Statement: Recently we found that some issue happened with this cookie. Especially, when users upgraded their OS versions to 18.6 or 26.1 or 26.2. Need to understand, any changes related to Cookie part in latest OS Versions?
Topic: Safari & Web SubTopic: General
0
0
303
Dec ’25