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

How to interact programatically with the popup paste button
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?
Topic: Safari & Web SubTopic: General
0
0
234
Nov ’24
Videos keep refetched with loop
Hello there, For a video like this <video src="blob:safari-web-extension://***" autoplay="" loop="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; z-index: -1;"></video>, no matter if its local or remote, blob or mp4 files, is constantly being reloaded (refetched? revalidated?) if the loop tag is added. I can confirm there is actual constant traffic from the server based on my server logs. I am running iOS/macOS 26.
0
0
293
Jul ’25
Safari-Specific React Animation Issues: Infinite Scroll Breaking on MacBook
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 ⬇
Topic: Safari & Web SubTopic: General
0
0
461
Nov ’24
Safari Flags My Rebuilt Site as Deceptive — Need Review / Whitelisting
Hi Apple Devs & WebKit Team, We operate https://excnum.com — a personal website currently under reconstruction. It's HTTPS-secure, hosted on a clean VPS, and now features a simple placeholder page with no active forms, scripts, or external redirects. However, Safari on both iOS and macOS is flagging it as a “deceptive website”, blocking all access. This warning appears even though: The site uses a valid SSL certificate via Cloudflare There are no redirects, tracking scripts, or dynamic code We serve a static landing page (“under maintenance”) with zero interaction No malware, phishing, or obfuscation exists — verified with multiple tools A review request has already been submitted at: https://websitereview.apple.com We believe the site may have been blacklisted previously under past ownership or prior configurations. It has since been completely restructured and cleared, but the Safari warning persists. This false flag is harming visibility and trust for an otherwise neutral website. Any advice on how to expedite re-evaluation or request a manual delisting from the deceptive site list would be much appreciated. Thank you! — Alex Admin, EXCNUM.COM
0
0
225
Jul ’25
Throttling on navigator.geolocation.getCurrentPosition on Safari
I'm using navigator.geolocation.getCurrentPosition to retrieve the users coordinates in a PWA built with Nextjs. getCurrentPosition is called by clicking on a button. If getCurrentPosition is called afterwards, the cached value is returned. On Safari, If I refresh the page, or logout, login and call getCurrentPosition again, the getCurrentPosition error callback is called with an error code 2 - POSITION_UNAVAILABLE. After around five minutes, getCurrentPosition can be called again. Is there some kind of throttling restriction on Safari navigator.geolocation.getCurrentPosition?
0
0
429
Jan ’25
Failing Network Requests in Safari due to DNS cache.
We are seeing network errors in Outlook mail on iOS and MacOS safari browsers. As per current investigation, we notice these network error when the user tries to use outlook after leaving it open on Safari for a while. Observations: Issue present in both MacOS and iOS safari. Issue is not present in other webkit browsers like brave and edge on iOS. Issue is reproable on both mini and big owa on safari browser. Issue is not related to post requests being sent in different packets on safari browser. Requests are only blocked for outlook.office/outlook.live domains What does not fix this issue? Reloading the application Clearing cookie, local storage or session storage Unregistering service workers Redirecting to a different page and coming back to outlook domain Re authenticating the users What fixes this issue? Reconnecting to wifi or mobile network Reconnecting vpn Removing safari from background and reopening Flushing the dns in setting
0
2
125
Mar ’25
After set video.src, video.play() not work
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>
Topic: Safari & Web SubTopic: General Tags:
0
0
380
Nov ’24
Smart App Banner has changed background color
We have a Smart App Banner (including App Clip) on our website and have noticed today that the banner's background color has changed. It no longer has the default white background and blue button color, instead it has a background color that matches our page's background, and even the color of the button has changed. What's interesting is that we have not triggered this change at all. The colors seemingly changed by themselves. Looking at the Apple Documentation, no customization options are mentioned. Searching the web, the theme-color meta tag is mentioned in relation to this, however we haven't even included that tag on our page. What is triggering this color change then and how can we influence it?
Topic: Safari & Web SubTopic: General
0
0
57
Jun ’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
37
Jun ’25
Strong password masking
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?
Topic: Safari & Web SubTopic: General
0
0
262
Dec ’24
Apple Pay Third party browsers - completeMerchantValidation fails
I've a apple pay integration on my website. The new sdk, that allows third party browsers. My integration works well everywhere, except on third party when I read the QR code it results in a "payment incomplete". I have gone through several threads in apple dev forums, and several guides on implementation steps and troubleshooting. But I'm still without solution. When Debugging in iOS device I get: "Application failed to provide a valid merchant session. We can't proceed to authorize the transaction." I've doublechecked, the values I send to create the payment Session are correct, the domain and merchantIds. (It works well with the same implementation on safari, what's the difference here?) I've also doublechecked the values i'm sending to the completeMerchantValidation, and they are all in the right format and types. What else can iIcheck?
0
0
353
Feb ’25
Unwarranted Autofill prompt for non authenticator grid boxes
On Mac, If the user registers the Password and the Software Authenticator app for a website like PayPal then uses the Safari browser to login the Apple system is creating confusion. The system prompts to use the authenticator autofill for any grid like SMS OTP or even for the Email OTP. That creates confusion for the user as the SMS OTPs or other OTPs cannot be validated by auto filling the Authenticator TOTP. That fails the validation resulting in bad user experience. The system should not prompt the Autofill from the Authenticator app unless the grid box shown on the page was for the Authenticator app.
0
0
412
Jan ’25
Are my 3d stereo Mars images working fine on Vision Pro? (HEIC format created from 2 JPEGs)
I'm currently experimenting to add 3d stereo images in HEIC format to my daily Mars Rover Images website https://areo.info/mars20 which can be opened on a Vision Pro. Only a few images are yet converted into that mode, those on the sol 1411 page. As I'm currently only working in the Vision Pro Simulator from Xcode, no real 3d effect if of course visible and I'm curious if anyone using the real hardware can confirm that the images are working. Especially the eye distance correction is important to know about as the Mars Rover camera has a much wider pupil distance than humans and while I entered that distance in the conversion tool, I'm not sure if it worked well. So feedback is welcome! For those who like to try to create stereo images themselves: I used https://developer.apple.com/documentation/ImageIO/writing-spatial-photos to create a HEIC file from two JPEGs.
0
0
221
Feb ’25
WebXR Consent Dialog
Based on the "Build immersive web experiences with WebXR"-Video for visionOS there is no way to disable the consent prompts for entering an immersive experience or consent hand-tracking. For the microphone it's possible to "greenlight" specific websites for mic input, which works great. I'd welcome it, if it were possible to add specific websites in the settings, in which those consent dialogs aren't shown each time. In my opinion, the user interaction through a button that launches the experience would be sufficient to not disorient.
0
1
76
Jun ’25
Issue with iOS Safari Handling Updates in .ics Files
I have an endpoint that generates a .ics file. From my mobile app, I open the browser (Safari) and retrieve the .ics file. In Safari, the events are displayed as expected, and I can use the "Add All" button to add them to the calendar. After clicking "Add All," I can select the desired calendar, and the events are successfully added (see screenshots 1 and 2 below). Here’s the initial .ics file response: BEGIN:VCALENDAR VERSION:2.0 CALSCALE:GREGORIAN PRODID:NAME BEGIN:VEVENT DTSTAMP:20250101T195917Z DTSTART:20250102T131600 DTEND:20250102T142500 SUMMARY:My Event 1 UID:unique-uid1 LAST-MODIFIED:20250101T155715Z DESCRIPTION:Description SEQUENCE:1 END:VEVENT BEGIN:VEVENT DTSTAMP:20250101T195917Z DTSTART:20250103T131600 DTEND:20250103T135600 SUMMARY:My Event 2 UID:unique-uid2 LAST-MODIFIED:20250101T155715Z DESCRIPTION:Description SEQUENCE:1 END:VEVENT END:VCALENDAR Later, I updated the .ics file with new event details: BEGIN:VCALENDAR VERSION:2.0 CALSCALE:GREGORIAN PRODID:NAME BEGIN:VEVENT DTSTAMP:20250102T195917Z DTSTART:20250104T131600 DTEND:20250104T142500 SUMMARY:My Event 1 Update UID:unique-uid1 LAST-MODIFIED:20250104T155715Z DESCRIPTION:Description SEQUENCE:2 END:VEVENT BEGIN:VEVENT DTSTAMP:20250102T195917Z DTSTART:20250105T131600 DTEND:20250105T142500 SUMMARY:My Event 2 Update UID:unique-uid2 LAST-MODIFIED:20250102T155715Z DESCRIPTION:Description SEQUENCE:2 END:VEVENT END:VCALENDAR I updated everything according to the iCalendar documentation: UID remained unchanged SEQUENCE has been updated DTSTAMP has been updated LAST-MODIFIED has been updated However it seems like that Safari can't handle updates on events. In the preview we can see the changes, but when I click on "Add All" button, nothing happens. The same behavior is working with other calendars like Outlook (web view) or Google Calendar. My Questions: Is there a property missing from my .ics file that is necessary for iOS Safari to handle updates? Is Safari not designed to handle event updates in this way? Should I consider moving to a subscription-based solution to manage updates more reliably? Any insights or suggestions would be greatly appreciated!
0
0
605
Jan ’25
Notification sound (Web or PWA)
Good morning fellow developers, For a while i am struggeling with providing sound to my users on IOS (Safari on Mac is no problem and every other device is not a problem) (we have an existing phone system and made a chat as well), the case is very simple: the notification sound is only for users who are logged in and online for chat. i have tried multiple things: Audio play with javascript (start with mute, play when user clicks a button so the sound is familiar, play when user clicks a button and directly pause it and continue when needed) PWA: the dashboard has been made available as pwa and notifications using google firebase. The popup does show for notifcations to be allowed (and receiving the notifications does work on any other device) But any IOS device cannot register. The information i find is that notifications were supported with 16.4 or higher but also have been deprecated around IOS 17, auto play is not allowed. We have an app in development for our product as well were we will have a notification which will handle this, but that is not the solution we can use now. Long story, short question: is it still somehow possible to push a notification to the user when using the PWA or play a sound in the browser (based on an ajax function). The app/website wont be in the background, so it will always be on the screen. Languages we use: html/javascript (mostly vanilla)/php
0
0
70
Mar ’25
iOS 18.3.x no longer accepts self singed certificates
We have an app store app that hosts an internal webserver we use as a proxy and it works for a period until iOS 18.3.x decides our cert is no longer valid at which point our customer have reinstall the app. This has only become a problem on iOS18.3. We publish the self-signed with out app, and it is valid and accepted until it's not. We know the cert is valid and our implementation of the local proxy has not changed. If we install a cert on the device and trust it, then the app will start behaving normally again without reinstall. We have replicated this locally and the error we are seeing is: Error Domain=NSURLErrorDomain Code=-1200 "An SSL error has occurred and a secure connection to the server cannot be made." UserInfo={NSLocalizedRecoverySuggestion=Would you like to connect to the server anyway?, _WKRecoveryAttempterErrorKey=<WKReloadFrameErrorRecoveryAttempter: 0x301111e40>, networkTaskDescription=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, _kCFStreamErrorDomainKey=3, NSErrorPeerCertificateChainKey=( "<cert(0x108e3b700) s: 127.0.0.1 i: 127.0.0.1>", "<cert(0x108e3b980) s: 127.0.0.1 i: 127.0.0.1>" ), NSErrorClientCertificateStateKey=0, NSErrorFailingURLKey=https://localhost:8082/Blablal/?device=ios&sftouch=1&pgport=8081&secure=1, NSErrorFailingURLStringKey=https://localhost:8082/blahblah/?device=ios&sftouch=1&pgport=8081&secure=1, NSUnderlyingError=0x301e1d680 {Error Domain=kCFErrorDomainCFNetwork Code=-1200 "(null)" UserInfo={_kCFStreamPropertySSLClientCertificateState=0, _kCFNetworkCFStreamSSLErrorOriginalValue=-9802, _kCFStreamErrorDomainKey=3, _kCFStreamErrorCodeKey=-9802}}, _NSURLErrorRelatedURLSessionTaskErrorKey=( "LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>" ), _kCFStreamErrorCodeKey=-9802, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, networkTaskMetricsPrivacyStance=NotEligible, NSURLErrorFailingURLPeerTrustErrorKey=<SecTrustRef: 0x302670a50>, NSLocalizedDescription=An SSL error has occurred and a secure connection to the server cannot be made.}
Topic: Safari & Web SubTopic: General Tags:
0
0
603
Feb ’25
Safari Web Extension Error Stack Traces in Sentry Show webkit-masked-url://hidden/ — Any Way to Restore Real Script Paths?
I’m a developer working on a Safari Web Extension that’s distributed via the App Store and also tested locally through Xcode. I’m running into an issue that’s affecting my ability to debug errors reported to my Sentry error logging instance from production. The Problem When an error is thrown in one of my extension scripts (e.g., background.js, popup.js, or content.js), the error is sent to Sentry but the captured JavaScript error stack trace replaces the file paths with the webkit-masked-url://hidden placeholder like this: ReferenceError: Cannot access uninitialized variable. at ? (webkit-masked-url://hidden/:14677:28) at ? (webkit-masked-url://hidden/:16307:3) This happens consistently across both App Store builds and local Xcode runs. It prevents me from seeing which script the error came from or resolving the actual source code lines using uploaded source maps in Sentry. My Setup Safari Version: 18.5 (Stable on macOS) Distribution: App Store and local Xcode development Extension Type: Safari Web Extension Error Reporting: Sentry (@sentry/browser SDK) Bundler: Webpack with inline-source-map What I’ve Confirmed I can see the actual source files in Safari’s Web Inspector under the Sources tab when the extension is running. My source maps are uploaded to Sentry correctly and are associated with the matching release. Errors from Safari are being captured by Sentry, but the file URLs are masked, so stack traces cannot be resolved against my original source. My Question Is this behavior (masking file URLs in stack traces with webkit-masked-url://hidden/) intentional for Safari Web Extensions? If so, is there any supported method or workaround to allow exception stack traces to reveal the original script path (e.g., popup.js, background.js) so tools like Sentry or even console logs can point to real locations? I fully understand the privacy/security rationale behind the masking, but as the extension developer, this is making it extremely difficult to debug runtime issues in production. I’d really appreciate any insight into: Whether this masking is expected and permanent behavior If there are any entitlements, debug settings, or Info.plist keys that can alter this behavior for development or for trusted/own extensions If Apple recommends a different way to log extension errors that includes script name or source references Thanks in advance for your help! I’m happy to share more technical details or try out suggestions.
0
0
109
Jun ’25