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.

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?

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, }), ); });

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 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?

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).

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 want to know will element support an x3d model?

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.

Iphone 16 pro After set video.src, video.play() not work <div> <button id="play"> play </button> </div> <video id="video" preload="auto" playsInline webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true" raw-controls="true" style="width: 300px;" > <source src="****.mp4" type="video/mp4" /> <track kind="captions" srcLang="en" /> </video> <script> document.querySelector('#play').addEventListener('click', function() { document.querySelector('#video').play(); }) document.querySelector('#video').addEventListener('ended', function() { document.querySelector('#video').pause(); document.querySelector('#video').src = '*****.mp4'; document.querySelector('#video').play() }) </script>

I'm encountering a browser-specific issue with a React infinite scroll animation component. The animation works perfectly in Chrome on MacBook, but breaks specifically in Safari: ✅ Chrome on MacBook: Works perfectly ❌ Safari on MacBook: Animation and layout issues Technical Details Environment Browser: Safari: Version 18.1.1 (20619.2.8.11.12) MacBook 13-inch display React 18 GSAP for animations TailwindCSS for styling Next.js/TypeScript project Implementation const MovingGrid: React.FC = () => { useEffect(() => { const initAnimation = () => { const container = containerRef.current; if (container) { gsap.to(container, { x: `-${firstSet.clientWidth}`, duration: 30, ease: "none", repeat: -1, onRepeat: () => { gsap.set(container, { x: 0 }); } }); } }; }, []); return ( <div className="hidden lg:block overflow-hidden w-full relative"> <div ref={containerRef} className="flex absolute -bottom-[100px]"> {/* Grid content */} </div> </div> ); }; Safari-Specific Behavior Images overflow the container in Safari only Layout gets disrupted when animation resets Same code works perfectly in Chrome on the same machine Cross-Browser Testing Results Safari on MacBook: Issues with animation and layout Chrome on MacBook: Works as expected Firefox on MacBook: Works as expected Safari on iOS: Needs testing Chrome on Windows: Works as expected Attempted Solutions Safari-specific CSS fixes: /* Attempted Safari-specific fixes */ @supports (-webkit-hyphens:none) { .moving-grid { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } } Modified GSAP configuration for Safari: gsap.config({ force3D: true }); Tried various CSS transform and positioning approaches: className="transform will-change-transform" style={{ WebkitTransform: 'translate3d(0,0,0)' }} Questions Are there known Safari-specific issues with GSAP animations that require special handling? Does Safari handle infinite scroll animations differently from Chrome in terms of performance or rendering? Are there recommended Safari-specific optimizations for smooth animations? Should we implement a different animation approach specifically for Safari users? Investigation Notes Performance metrics show no significant issues Animation frame rate is consistent Layout calculations appear correct before animation starts Impact This issue affects a crucial part of our property showcase website, specifically impacting Safari users on MacBook devices. Given Safari's significant user base on MacBooks, this needs to be resolved for a consistent cross-browser experience. Additional Context The animation is part of a larger property showcase feature Performance is crucial for user experience Need to maintain visual consistency across browsers Reproduction Steps Open website Safari on MacBook [pinkdoorbnb .com] Observe the infinite scroll animation Compare with Chrome on the same device Note the differences in animation behaviour and layout I would greatly appreciate any insights into Safari-specific animation handling or alternative approaches that work consistently across browsers. Here is sample Google Chrome ⬇ Safari ⬇

I noticed that when logging in to idmsa.apple.com, my old email address still appears as an option, even though I’ve updated my Apple ID to a new email. I understand that passkeys rely on a public-private key pair, with the public key stored on the server (e.g., idmsa.apple.com) and the private key saved locally in iCloud Keychain. Could you please clarify: 1. How can I request Apple to delete the public key associated with my old email address from their servers? 2. Is there a way for users to manage or update server-side passkeys without contacting Apple support? 3. Does this behavior affect my account security in any way? Any advice or insights would be greatly appreciated!

When I want legend inside the filedset, not on the border as default browsers design, I set float: left to the legend. It works in every modern browser - Safari too. The problem is when the filedset itself is set to display: flex. Float propertie of the legend is ignored. In other browsers this approach works fine and the float stays and the legend is inside of the fieldset as we expect.

Hello there my iPhone 16 pro max has an issue with safari and apple support couldn’t help me there and said I should get help here Safari completely doesnt work it doesn’t start and if it starts it crashes can anyone help me to get safari useable

iPhone 15pro iOS 18.2 Downloaded files cannot be located anywhere in Files, only by accessing Downloads in Safari. I have tried setting download folder to various locations, iCloud, Phone, Google Disk, but nothing is stored. Has an invisible cache or temp folder been introduced? If so, it is a total fail: When press-holding any file in Safari download, the normal file action options (Quick Look, share, store to Files, etc) are not available. When clicking any file it opens any of several apps that has this file type associated with it, and there is no way to change the default app or disable the forced opening of an app. I tried deleting the app opening .csv (in this case OneDrive), and another irrelevant app opened. There seems to be a hierarchy of apps-file types, and it has no logic to it. in Chrome behaviour is as expected. Chrome vs. Safari screen recordings: https://shorturl.at/my3Oy

I have a Safari extension which allows the user to load their own homepage upon opening a new tab. The extension works by retrieving the homepage URL from UserDefaults and then redirecting to it using window.location.replace. In iOS 18, if the homepage is unable to be loaded due to, for example the user having no internet connection, Safari will go into an rapid loading loop, which eventually stops after a while. This is unlike iOS 17, where trying to reproduce the same scenario will end up with a Safari error page, which should be the expected behaviour. In short, instead of Safari going into an infinite loading loop, it should display a Safari error page like iOS 17 does. As this issue is only happening on iOS 18, I am almost certain it's an iOS bug and would appreciate if this can be fixed as soon as possible. I have created a Feedback Assistant report with ID FB15853821, which contains a sysdiagnose file from my iPhone 16 Pro, as well as two videos, one from my iPhone 16 Pro with iOS 18.2 beta 3 and the other video showing a comparison between iOS 18 and 17. Both videos first show the extension functioning correctly with an active internet connection, but when I disable my internet, the iOS 18 Safari goes into an infinite loop. Here are the steps to reproduce the issue: Download the Homepage for Safari app from the App Store: https://apps.apple.com/gb/app/homepage-for-safari/id6481118559 Enter any valid homepage URL, such as https://apple.com and tap Save Go to Settings -> Apps -> Safari -> Extensions -> Homepage and enable the extension Make sure Open New Tabs is set to “Homepage” Turn off both WiFi and cellular data and attempt to open a new tab in Safari Please note that this also happens with iOS 18.2 beta 4.

We have a PWA that can be added to a users home screen. In IOS 17, when added to a phones home screen, the camera works as expected. Since testing this on an IOS 18 device, the camera does not work. I am asked if I want to allow the camera. After saying yes, it never loads. I do see a red camera icon in the top bar, but the camera doesn't show. When trying the PWA in the safari web-browser, the camera works as expected

Apple intelligence is not available in the iPhone 15 Pro brought from China

A few observations Very slow response and loading times for both URLs, forms, and scrolling Frequently non-responsive touch-screen for on-page forms and actions Keyboard stays open with no option to get rid of it Auto zoom stuck in xoomed-in mode, often hiding "Save"/"Submit"-buttons Dowbload folder setting ignored Toggling of web inspector mode does not work In vertical mode, with address bar on top of screen, clicking items on bottom part of page is not registered as click, but makes the navigation bar pop up, hiding the clickable feature. For clicks to register, frequently 2-3 touches are required.

I am trying to figure out a way to programatically paste the contents of the clipboard into a series of text input fields. Specifically, this is for a security code entry screen, where the user will receive a code as a string of number characters. After verifying that the string represents a number, I split it into an array of single number chars, then paste the value at each index into each input. This works fine in Chrome and Firefox, but fails in Safari. After a lot of research, I have found that programatic pasting is a challenge on this platform. I did discover that if I listen for the focusin event and then get the contents of the clipboard, a popup "paste" button will appear. Clicking it does nothing, but I'm thinking that I might be able to grab the button in code and bend it to my will. Can anyone tell me how to interact with that button?