There is a display issue when viewing HTML containing ruby tags on Safari for iPad. The layout appears distorted. Steps to reproduce: Preparation: Device: iPad mini (MUQY2J/A) / iPad Air (MM9F3J/A) Open Safari. Access the following URL: https://67440d05c7b448995b6e5619--admirable-muffin-193494.netlify.app/ The text in the left cell overlaps with the text in the right cell. Please refer to the attached file: Notes: This issue does not occur when ruby tags are absent. The same issue occurs in Chrome as well (possibly a WebKit-related problem?).

I am experiencing an issue with Apple's Universal Link method for eSIM setup. The specific link format used is: https://esimsetup.apple.com/esim_qrcode_provisioning?carddata=LPA:1$SMDP+_Address$Activation_Code On Safari: I encountered the message: "Safari cannot open the page because the server cannot be found." (Screenshot attached for reference). On Google Chrome: The first attempt to open the link shows the error: "This site can't be reached. Server IP address could not be found. ERR_NAME_NOT_RESOLVED." However, upon pressing "Reload," the expected behavior occurs, and I am redirected to the settings to install the eSIM (Screenshot attached). Additional Information: Devices/OS Versions: [iPhone 14 Pro, iPhone 13 mini], [iOS 18.0.1, iOS 18.1.1] (Safari and Chrome). Network Conditions: Tested on both Wi-Fi and 4G; behavior is consistent across both. Expected Behavior: The link should consistently redirect to the settings for eSIM installation without errors on the first attempt across all supported browsers. If some one can help with : Are there known issues or changes with the Universal Link service or the esimsetup.apple.com domain? Are there specific browser compatibility considerations or best practices I should follow for this Universal Link implementation? Could this behavior be related to DNS resolution or another underlying issue, and are there recommended debugging steps?

We’re currently trying to implement Apple Pay on our checkout flow pages, which are part of a NextJS application. Due to the fact that our checkout flow is a React-based application, we’re not using the element, but a custom button. We are using the Apple Pay JS API. It seems like we are getting most of the pieces in place, however we’re not having any success with the session.onvalidatemerchant event. Currently when a user clicks the Apple Pay button, the Apple Pay dialog appears briefly with a ‘Payment not completed.’ message and then closes immediately. Given the nature of the issue it seems like it could possibly be a configuration error, but we’re not really sure how to check that everything is configured as it should be. Some questions that we have at the current moment: What version of the Apple Pay API should we be using? Should the domainName value that we’re passing to Apple contain https:// ? Should we be calling the https://apple-pay-gateway.apple.com/paymentservices/paymentSession endpoint directly from our front-end code? Should we pass data to session.completeMerchantValidation(sessionData); as a JavaScript object or JSON?

I have tried to initialize service workers, but they only work in the WebView. When I open an iframe from that WebView, they do not function. Below is my implementation. Is this an issue because iOS does not support service workers in iframes? Please help me answer this. :man-bowing: self.addEventListener('install', event => { // Apply this service worker immediately self.skipWaiting(); }); const putInCache = async (request, response) => { const cache = await caches.open("v1"); await cache.put(request, response); }; const customCache = async ({ request, preloadResponsePromise }) => { }; self.addEventListener("fetch", (event) => { event.respondWith( customCache({ request: event.request, preloadResponsePromise: event.preloadResponse, }), ); });

Hi. I have reviewed the process of integrating Apple Pay on the web, but I still don’t understand how to implement it. For example: I currently have software A and a payment website that my software provides to restaurants. So, how can I integrate Apple Pay on the restaurants' payment websites? I read that to integrate, we need to register for a Merchant ID with Apple Pay. So, is it the restaurants or the software provider who should register? Each restaurant will have a different website domain -> does that mean when registering the Merchant ID, the website domain is the payment website of each restaurant? When Apple Pay provides the verification file, the sales software (i.e., the payment website) must help the restaurants upload that file to the payment website of each restaurant, right? To verify if it is valid or not depends on Apple Pay, right? If it is valid, the Apple Pay payment button will be displayed, correct?

Hi, I'm developing a PWA and I'm experiencing a host of strange issues exclusively with Safari and push notifications, none of which happen with other browsers (Chrome, Firefox, Edge, other Chromium-based browsers). I've been testing primarily on mobile, so it may be (although it's unlikely) that desktop Safari behave differently. The most severe issue is that the indexedDB global is undefined when the service worker is awoken by a push notification. This completely breaks things. I've recently updated to iOS 18.1.1 and I've seen this issue only recently, so it may be related to an update. The notifications endpoint keeps changing and notifications are missed. This issue is weird to make sense of, but the gist of it is that, after restarting the app, registration.pushManager.getSubscription() will, seemingly incorrectly, give null, triggering a call (in our app) to registration.pushManager.subscribe, which will give entirely different subscription information. "Deleted" notification endpoints keep on working (POSTing to them will return 201), instead of returning an error like Google, Microsoft & Mozilla do. This is perhaps not a critical, but it does complicate things on the backend, as we have few meaningful ways of automatically removing these endpoints. This may be related to 2 in that the endpoint is "created" but "forgotten". Sometimes (quite often) pushing a push notification will not result in any notification on the device, even if the handler has debug code to always display a notification for incoming messages. The endpoint will return a 201 response code. I've added some logic to our server to send a push notification as soon as a new push endpoint is seen, and this notification is shown, so it's the "background" notifications that are somehow missed. Testing shows that this may be related to 2, as in instances where the endpoint remains consistent, notifications seem to be delivered. Notification permissions are displayed inconsistently depending on the API used. Notification.permission seems to have the correct value, but navigator.permissions.query seems to always return 'prompt', regardless of the actual permission status. As a corollary to this, the onchange listener never seems to fire on Safari when a permission change occurs. I've searched in this forum, the Web and the WebKit bug tracker, and haven't been able to find anyone else experiencing these issues, other than the inconsistency of querying permissions. I suspect these are WebKit bugs, but it may also be that things are being done in a sequence that is "wrong" for Safari, which is not documented anywhere. Like I said, things work well in all other browsers. I have code to share where the issues can be reproduced reliably, but I don't at the moment have a minimal example. I would appreciate any help or direction with these matters.

Dear all, I have a web application, where it is possible to book a subscription on a monthyl / yearly basis via PayPal. Normally the users use the safari function "add-to-homescreen" for baving the webapp directly on the homescreen. Nevertheless, since one of the last updates, it is not possible to book a subscription via PayPal. But this is only for the homescreen variant. If i open it directly in safari everthying works as desigend. Looking forward to get some help from you. Thank you!

I'm trying to implement WebAuthn conditional credential creation but I'm not able to get it to work. From this video https://www.youtube.com/watch?v=p8a6ODX1zHY I understand I should call navigator.credentials.create with "mediation: conditional" but the explainer at https://github.com/w3c/webauthn/wiki/Explainer:-Conditional-Registration-Extension also mentions a call to navigator.credentials.get with "mediation: conditional" and "extensions: { conditionalCreate: true }". The explainer seems to suggest they should be called both but for me, both calls never resolve with a credential or an error. What am I doing wrong?

Hello, We have a Safari extension in the app store for about two years. Our extension relies on syncing the data available in a desktop application to the extension. For this we always used SFSafariApplication.dispatchMessage to sync the data without the extension requesting it. And it used to work just fine. Now it appears that dispatchMessage is being marked as unavailable to extensions, so now xcode 16 is failing to build the extension. Also the documentation (Send messages from the app to JavaScript) still indicates that we can use dispatchMessage to initiate communication from the mac os app. Is there a way to achieve this as it is required for our extension to function, and that's how we have built it for chrome and firefox (one codebase).

I have a small example project that ran on both the simulator and a connected iPhone but now it and all other projects are failing with the same error. I am using Xcode 16.0 on MacOS Sonoma 14.6.1., iPhone 11 with iOS 18. Thank you in advance. The error is: Failed to resolve host network app id to config: bundleID: com.apple.WebKit.Networking instance ID: Optional([_EXExtensionInstanceIdentifier: 1163B5D2-09D3-4704-9564-61099502138B]) WebContent process (0x114018680) took 1.375772 seconds to launch GPU process (0x1140a0630) took 1.228457 seconds to launch Networking process (0x114034d00) took 1.426249 seconds to launch 0x105820a20 - [pageProxyID=7, webPageID=8, PID=34786] WebPageProxy::didFailProvisionalLoadForFrame: frameID=1, isMainFrame=1, domain=NSURLErrorDomain, code=-1200, isMainFrame=1, willInternallyHandleFailure=0 Message from debugger: killed Below is the code from one of the examples: import UIKit import WebKit class ViewController: UIViewController { let webView: WKWebView = { let prefs = WKWebpagePreferences() prefs.allowsContentJavaScript = true let configuration = WKWebViewConfiguration() configuration.defaultWebpagePreferences = prefs let webView = WKWebView(frame: .zero, configuration: configuration) return webView }() override func viewDidLoad() { super.viewDidLoad() view.addSubview(webView) guard let url = URL(string: "https://google.com") else { return } webView.load(URLRequest(url: url)) //evaluate JavaScript DispatchQueue.main.asyncAfter(deadline: .now()+5){ self.webView.evaluateJavaScript("document.body.innerHTML") { result, error in guard let html = result as? String, error == nil else { return } print(html) } } } override func viewDidLayoutSubviews(){ super.viewDidLayoutSubviews() webView.frame = view.bounds } }

we are using angular and Html5 to develop our application, in our application we play videos that are placed on s3. Video when played on desktop borwser are adequatley audible but when played on iPad their volume is too low to be audible. I have tried video.volume =1 but it does not work for iPad because this property is only readable for ios devices. I have tried using javascript audioContext. It worked for my local machine. But when code is deployed on some hosted environments, it just does not work. Did anyone face the same issue? Any help regarding it will be appreciated.

When creating an AddtoCalendar (ics, google, yahoo, outlook) Safari detects tracking only for outlook.live and outlook.office via the url used to add an event to the online calendar. I would like to inform web users that if this option is activated and they want to add the event to their online outlook calendar, they will need to temporarily deactivate this security feature! Is it possible to detect this option in jsx? Would there be a solution, like requesting authorisation to locate on a website, to allow only this url or this site (outlook.live or outlook.office) for tracking? I'm obviously thinking of something simple for the web user: a button to click.

I'm embedding a page into an APP developed with Xcode through WKWebView, but I've encountered style issues with the page rendered by WKWebView. I simplify the problem as follows. Open this link with Safari: https://cofficlab.github.io/JuiceEditor-Playground What is the light blue part? How can it be removed? If this is a feature, what is the name? Chrome doesn't have this problem.

I’m trying to understand how the Reddit app knows to open in its anonymous mode when a link is opened from Safari’s Private Browsing mode. Does Safari explicitly pass any flag or metadata indicating the request originated from Private Browsing? Or is it inferred by the absence of shared cookies, session tokens, or other stateful data? If the detection is based on the absence of cookies, could this logic misidentify other stateless scenarios as ‘private’?

I’m deploying a pac file through jamf using the auto global http proxy. The purpose of this file is to block some traffic on the network level. We’re deploying the pac on iPhones. I tried to use || shExpMatch(url, “*.pdf”) to block any url with .pdf but iOS seems to just skip that line without implementing it. Am I doing something wrong or is there an apple specific function that I should use? thanks

I'm porting to Safari a Chrome/Firefox Extension that makes use of declarativeNetRequest.updateDynamicRules to remove some HTTP headers from requests to a specific URL. This works mostly fine, except for some headers for which this is not allowed by WebKit, such as the Priority header (which is however served by Safari). An annoying corner-case I found is that of the Cookie header. When trying to remove it from the request by adding the following rule { id: <rule id>, priority: <rule priority>, action: { type: "modifyHeaders", requestHeaders: [{ "header": "Cookie", "operation": "remove" }] }, condition: { urlFilter: <my url>, resourceTypes: ["main_frame", "sub_frame"] } } nothing error is thrown, yet the Cookie header is still being sent. This rule however works for other headers, such as Referer. Changing "Cookie" for "cookie" does not help. Questions: Is there an alternative way of removing the Cookie header from the HTTP request? Is this just a bug in WebKit? Is there any way of removing "unsupported" headers such as Priority? Any help or references are appreciated. Edited: more specific description of the corner-case.

Hey there guys! I'm new to this, and have been learning JavaScript on Udemy. I'm trying to do everything inside of Safari, instead of using Chrome. But I'm stuck on something that I feel is kind of small, but has been nagging at the back of my brain. When I go to the 'Inspector Developer Tools' (command + option + i), then go to 'Sources', and go to 'Console Snippets', I'm trying to figure out how to delete any JavaScript files from the Console Snippets selection. In Chrome, when you navigate to the Chrome equivalent, if I right click on the file, there's an option to remove the file, but on Safari the only option I get is to Run Console Snippet. Does anyone know how to remove or delete a JavaScript file from the Console Snippets section in Safari? I have no extensions installed.

Hi, We have configured WKAppBoundDomains and are using limitsNavigationsToAppBoundDomains to enable Service Workers, which works perfectly. However, we are now unable to load a WKWebView with any domain that is not included in the app-bound domains. For these other WKWebView instances, we have explicitly set config.limitsNavigationsToAppBoundDomains = false, but it doesn’t seem to have any effect. We don’t require access to the restricted APIs enabled by app-bound domains for these instances—we simply want them to load and perform basic website functionality. Is there a way to enable Service Workers selectively in some WKWebView instances while allowing others to remain unaffected by the App-Bound Domains restriction? Thank you for your help! Best regards, Rose Ding

Styling overlap occurs between the input field style and the generated strong password field in Safari browser. Is there a way to completely override the original input field style with the styling of the filled strong password?

Hi everyone, I'm developing a minimal Safari web extension for macOS and trying to implement "Sign in with Apple" directly from the extension popup, as per Apple's guidelines it's prohibited to open a new tab/window: Guideline 4.0 - Design: The user is taken to a new Safari window or tab to sign in or register for an account, which provides a poor user experience. What I've Done So Far Created an App ID with "Sign in with Apple" enabled and configured. Created a Service ID with the "Sign in" feature enabled. Enabled "Sign in with Apple" for native targets in Xcode Added the following JavaScript code in my popup.html file to initialize the Apple JS API and handle authentication via a popup: &lt;script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"&gt;&lt;/script&gt; &lt;script&gt; // have tried many different configurations here - nothing works! AppleID.auth.init({ clientId: '&lt;valid client ID&gt;', redirectURI: '&lt;valid URL&gt;', usePopup: true, }); document.getElementById('sign-in-button-apple') .addEventListener('click', () =&gt; { AppleID.auth.signIn().then((response) =&gt; { console.log('Success', response) }).catch((error) =&gt; { console.error('Error', error) }); }); &lt;/script&gt; I also added event listeners for AppleID events: document.addEventListener('AppleIDSignInOnSuccess', (event) =&gt; { console.log('Success', event); }); document.addEventListener('AppleIDSignInOnFailure', (event) =&gt; { console.log('Error', event); }); Issue When I click the "Sign in" button in the popup, a native macOS dialog appears for authorization. However, after confirming sign-in, the modal just closes and no response (success or error) is logged in the console. Expected behavior To receive a success message or an error in the console about the authorization process result. Questions Service ID Configuration: Since the popup's location URL is safari-web-extension://&lt;random-url&gt;, I can't add it to the supported redirect URLs in the Service ID settings. Is there a way to work around this? Safari Web Extension Setup: Are there specific configurations required in Xcode to enable "Sign in with Apple" within a Safari web extension? Sign-In Method: Am I correctly implementing the signIn method in the JavaScript code? Could there be any constraints or special considerations for running it within an extension popup? I would greatly appreciate any guidance, examples, or documentation that can help resolve this issue. Thank you in advance!