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.
Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
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
Before iOS 26.3, the WKWebView method open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation? worked fine when both parameters were passed the same path (e.g., h5path/index.html), allowing access to and loading of other files like CSS and JS within the h5path directory. However, in iOS 26.4 Beta, this results in an error, and the second parameter must point to a parent directory. Is this a bug?
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
I'm trying to download mods for Stardew Valley, before the beta it worked but now it doesn't. Is there anyone who can help to fix this? Used Firefox and Safari as well as Safari on my ipad.
I created a form field using:
On Safari and Chrome desktop, it behaves as expected. Safari shows the current date in grey by default, and Chrome displays a format hint like dd.mm.yyyy, which is perfectly fine.
On iOS, however, the field appears completely blank. I understand that the placeholder attribute is not part of the iOS date input behavior, which is technically fine. Still, it would be helpful if developers had the option to define a default display value. In the past, browsers prefilled date inputs, but many developers objected because they needed the field to be empty by default.
I have searched extensively and tried several AI tools, and everywhere it says that this cannot be changed. Am I missing something, or is there any way to display a placeholder, the current date, or some kind of visual hint in iOS Safari?
Right now, the empty field creates poor UX because users may overlook it. Since the field is required, this can easily lead to validation errors and additional friction.
As a workaround, I used a CSS hack with input[type="date"]::before and a content attribute. I also added JavaScript to toggle a pseudo-placeholder value specifically for iOS.
Is there a cleaner solution that avoids this workaround?
Thanks in advance for your guidance.
Summary:
We are facing a serious issue on iPhone where multiple passkey authentication problems occur when accessing passkey-enabled login pages via shortcuts placed on the iPhone Home Screen. These issues may also occur when opening the same pages directly in a standard browser window. However, launching the login pages from a Home Screen shortcut appears to increase the likelihood of encountering these issues.
Affected Services (examples, not exhaustive):
Amazon
GitHub
Adobe
Observed Issues:
Issue 1: A passkey authentication dialog/popup shows two times without any user operation:
What happens due to this issue:
Login does not complete after the first passkey authentication.
A second passkey authentication UI automatically appears.
Completing or canceling the second authentication allows the login to proceed.
Issue 2: Login remains stuck until the user manually invokes passkey again
What happens due to this issue:
The login page does not advance after the first authentication.
The user must tap the ID/username field again to manually trigger the passkey UI.
Completing the second authentication enables login.
Issue 3: Automatic second authentication occurs, but login still fails
What happens due to this issue:
A second automatic authentication UI appears.
Login still does not complete.
Tapping the ID field no longer opens the passkey UI; instead, the password auto-fill panel appears.
Passkey login becomes impossible.
Observed reproduction steps (not guaranteed but most consistently observed):
On iPhone, navigate to a passkey-enabled login page (e.g., Amazon, GitHub, Adobe) using a browser.
Create a shortcut from the browser's share menu and place it on the Home Screen.
Launch the login page from the Home Screen shortcut.
Tap the ID/username field to invoke the passkey prompt.
Complete passkey authentication.
→ One of the issues described above occurs.
Environment:
Device: iPhone SE
OS: iOS 18.6.2
Topic:
Safari & Web
SubTopic:
General
Tags:
WebKit
Safari
Safari and Web
Passkeys in iCloud Keychain
In my chat web app I have button to upload images. On iOS in Safari I can see action sheet with "Media library", "Caption image or video", "Open files". Can I prevent opening this action sheet and directly open media library using HTML or JavaScript?
I have compiled some Java code to WebAssembly via TeaVM and wrapped it in a PWA. The resulting code runs nicely in Firefox and Chrome but throws an exception in Safari.
CompileError: WebAssembly.Module doesn't parse at byte 1657: invalid extended GC op 24, in function at index 2251
Can anybody tell me what's wrong with that code? I mean it can't be so bad if Firefox and Chrome can parse and run it without problems. I am using the most recent versions of all browsers and the offending code can be found here:
Run the demo via: https://mpmediasoft.de/demos/Emmentaler/Emmentaler-Demo-TeaVM-Wasm/index.html
The offending wasm file is: https://mpmediasoft.de/demos/Emmentaler/Emmentaler-Demo-TeaVM-Wasm/tvw/ModelBridgeTeaVM.wasm
With Safari the demo just shows some empty space instead of a complex polygon. You can see the error in the javascript console of Safari.
Topic:
Safari & Web
SubTopic:
General
Hello, why is Safari blocking my domains? https://fitgel.ru https://fittoma.ru https://ohota.pro There are no errors in them, other browsers respond normally.
Topic:
Safari & Web
SubTopic:
General
MacOS: 12 ( Monterrey )
Safari: 17.6
Demo Site: https://applepaydemo.apple.com/
At the bottom where the Apple Pay button should appear, I see a warning something like "This browser doesn't support Apple Pay, please use safari" along with a link to requirements for apple pay.
All the requirements are fulfilled, OS and Safari's version are above the minimum required.
Link was opened in Safari.
And the other thing is if I open the same site in Chrome, I can see the apple pay button and when I click on it a QR appears which is the expected behaviour.
How to resolve this?
Cross posting from Spatial Computing, apologies if this is not the appropriate forum. The purpose is to create a simple web-based gallery of spatial photos and videos using static html files. I have successfully displayed spatial photos using the img tag and IMG.heic files. I can tap and hold the image to bring up the contextual menu and from there select View Spatial Photo. Is there any way to add a control to the image, like a link or overlay on the image itself, that a user can simply tap to show the image in 3D? And how to host a (small!) video file on a web page without going through a CDN/streaming service? Sample html would be much appreciated.
Hello,
I followed the instructions to set up a custom logo for our domain name Allogarage.fr, both for the brand and the domain. Everything appears to be correctly configured in Apple Business backend for several weeks now, but the logo still doesn’t show up in Mail.
Is the branded email feature available in France? Are there any additional steps required?
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
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
When I open com. apple. developer. web browser, I am unable to inject JavaScript into the webview through methods such as addUserScript. The console will prompt 'ignoring user script injection for non app bound domain'
Push Notification Issue in iOS PWA App
We’ve been trying to implement push notifications in our iOS app, which is a wrapper around a Vite PWA built using PWA Builder. Here's a detailed overview of the issues we’re facing:
Problem Summary
We originally had a working Vite PWA and used Firebase Cloud Messaging (FCM) for push notifications. When converting this PWA to an iOS app using PWA Builder:
The notification permission prompt did not behave as expected in Safari.
Even after requesting permission via a user gesture (e.g., button press), FCM token was not received.
On Safari (both Mac and Windows), permission sometimes works, but the token isn’t saved until Safari is closed and reopened.
In the iOS PWA app, the FCM token never gets retrieved.
We tried the same process on Chrome, and everything works flawlessly there.
What We’ve Tried
Wrapped the permission request and FCM token logic in a user gesture (e.g., button click), as recommended.
Confirmed our manifest includes all necessary fields (see below).
Tested across macOS, Windows, Safari (desktop), and the iOS app.
Manifest.json
{
"name": "Periscopio",
"short_name": "Periscopio",
"start_url": "/",
"display": "standalone",
"background_color": "#f2f2f2",
"lang": "en",
"scope": "/",
"description": "Facilitates the collection of primary data for market research purposes.",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/maskable_icon_x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/maskable_icon_x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"edge_side_panel": {
"preferred_width": 400
},
"display_override": [
"window-controls-overlay",
"standalone"
],
"theme_color": "#08244c",
"orientation": "portrait"
}
Core Logic (Plain TypeScript)
1. Request Notification Permission + FCM Token
async function handleRequestPermission(): Promise<string | null> {
try {
console.log("Requesting notification permission...");
const permission = await Notification.requestPermission();
console.log("Notification permission result:", permission);
if (permission === "denied") {
console.error("Notification permission was denied.");
return null;
}
const token = await requestFCMToken();
console.log("FCM Token:", token);
if (token) {
console.log("Notification setup successful.");
return token;
} else {
console.error("Failed to retrieve FCM token.");
return null;
}
} catch (error) {
console.error("Error requesting FCM token:", error);
return null;
}
}
2. FCM Token Logic
async function requestFCMToken(): Promise<string | undefined> {
try {
let permission = Notification.permission;
if (permission === "default") {
console.log("Requesting notification permission...");
permission = await Notification.requestPermission();
}
if (permission === "granted") {
console.log("Notification permission granted.");
const isSupportedBrowser = await isSupported();
if (!isSupportedBrowser) {
console.error("This browser does not support FCM.");
return;
}
const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js");
console.log("Service Worker registered:", registration);
const token = await getToken(cloudMessaging, {
vapidKey: "YOUR_PUBLIC_VAPID_KEY_HERE",
serviceWorkerRegistration: registration,
});
if (token) {
console.log("FCM Token:", token);
localStorage.setItem("fcmToken", token);
return token;
} else {
console.warn("No registration token available. Request permission to generate one.");
return;
}
} else if (permission === "denied") {
console.warn("Permission to notify was denied.");
return;
} else {
console.warn("Notification permission not granted.");
return;
}
} catch (error) {
console.error("Error getting FCM token:", error);
return;
}
}
Request for Help
We’d really appreciate support from anyone who’s successfully implemented FCM push notifications in a Vite PWA wrapped as an iOS app using PWA Builder.
Is there something we’re missing about how iOS Safari handles push permissions in PWA mode?
Could there be an issue with the service worker or the manifest setup that causes the token not to register?
Any Safari-specific quirks to be aware of?
Thanks in advance!
Topic:
Safari & Web
SubTopic:
General
Hi everyone, recently I used codex and GPT-5.2 to build a simple SSL certificate monitoring website, and I'd like to share some of my development experiences. The project link is at the end, but first, let's talk about the technical implementation.
The Motivation
I've encountered several service outages caused by expired SSL certificates in the past. Each time, I had to react after users reported the issue, which was very passive. While there are some monitoring tools on the market, they are either too heavy or lack the necessary features, so I decided to build my own.
Technology Stack
Next.js 16 + shadcn/ui + TypeScript
I chose Next.js because:
The development experience with App Router is excellent, with a clear mapping between routes and file structure.
Server Components reduce the need for client-side JavaScript.
Built-in features like image optimization and font loading are ready to use out of the box.
shadcn/ui is a component library based on Radix UI, and its advantages are:
Components are copied directly into your project, giving you full control.
It uses Tailwind CSS, making style customization easy.
It has excellent accessibility features.
Drizzle ORM + PostgreSQL
I've used Prisma before, but I tried Drizzle this time and found it to be more lightweight:
Faster type generation.
More intuitive SQL operations.
Better query performance.
better-auth Authentication System
This is a recent discovery I made, and it's more modern than NextAuth:
Better TypeScript support.
A cleaner API design.
Supports email/password and multiple OAuth providers (GitHub, Google).
Some Challenges I Faced
1. The Complexity of Certificate Chain Validation
At first, I thought checking an SSL certificate was simple—just get the certificate information. I later discovered that certificate chain validation is quite complex:
You need to verify the signature of each certificate in the chain.
You must check the integrity of the entire certificate chain.
You have to determine if the root certificate is trusted (which browsers have built-in lists for).
You need to handle cases where intermediate certificates are missing.
The solution was to create a complete certificate chain extraction and validation module that includes:
Extracting the full certificate chain from a TLS connection.
Verifying the signature and validity period of each certificate.
Detecting broken or incomplete chains.
Visualizing the chain structure in a tree format.
2. Designing the Security Scoring System
To help users quickly understand the security status of their certificates, I created a scoring system from A+ to F. The core logic is:
Weighted score across four dimensions
- Certificate Validity: 30%
- Chain Integrity: 25%
- Cryptographic Strength: 25%
- Protocol Version: 20%
If there are critical issues (e.g., expired certificate), the maximum grade is C
The challenges were:
How to allocate weights reasonably.
How to design the penalty rules.
How to provide valuable improvement suggestions.
Ultimately, I adopted a layered scoring approach where each dimension is calculated independently and then combined with weights.
3. Hydration Issues with Multi-language Routing
When supporting 6 languages, I encountered React Hydration errors:
// ❌ Incorrect approach
// app/[locale]/layout.tsx contained the <html> tag
// This conflicted with the root layout
// ✅ Correct approach
// The root layout has only one <html> tag
// Use a client component to dynamically update the lang attribute
4. Graceful Degradation for Redis Caching
To improve authentication performance, I added Redis caching. But I had to consider:
What happens when Redis is unavailable?
How do you handle cache and database data inconsistency?
The solution was:
Automatically fall back to the database if the Redis connection fails.
Actively invalidate the cache when the database is updated.
Provide cache statistics API to monitor the hit rate.
5. PageSpeed Optimization
Initially, the Lighthouse score was only in the 60s. The main problems were:
Large JavaScript Bundle
Used Next.js's dynamic imports to load components on demand.
Removed unused dependencies.
Enabled Tree Shaking.
Image Optimization
Used the Next.js Image component for automatic optimization.
Added appropriate placeholders.
Enabled lazy loading for images.
Font Loading
Used next/font for automatic font optimization.
Reduced the number of font variants.
Used font-display: swap to avoid layout shifts.
Critical Rendering Path
Identified critical CSS and inlined it into the HTML.
Deferred loading of non-critical JavaScript.
Optimized the loading order of third-party scripts.
Third-party Script Optimization
Deferred loading for Google Analytics, Crisp Chat, etc.
Used the defer/async attributes.
Considered using Web Workers for time-consuming tasks.
After optimization:
Performance: 60 → 95
Accessibility: 85 → 98
Best Practices: 90 → 100
SEO: 100
Some Technical Highlights
Certificate Chain Visualization
A tree structure is used to display the certificate chain, with expand/collapse functionality and color-coding for different statuses:
Green: Valid
Yellow: Expiring soon
Red: Expired
Security Issue Detection
Automatically detects insecure cryptographic algorithms:
MD5, SHA-1 signature algorithms.
Weak ciphers like RC4, DES.
Old protocols like TLS 1.0/1.1.
Multi-channel Notifications
Currently supports five notification channels: Email, Slack, Discord, Telegram, and Feishu. Users can freely combine them.
Project Link
https://guardssl.info
Features:
Free SSL certificate checking.
Domain monitoring and expiration reminders.
Security scoring and improvement suggestions.
Multi-language support (Chinese, English, Japanese, French, Spanish).
Feel free to try it out and provide feedback. We can discuss any questions you might have.
Hello!
I have a few questions about integrating an OAuth2 API into my Swift application. I am using this API to access user data from the website (users will authenticate themselves within the app). I have seen other apps use this API in the way that I am describing it so I know that it is possible. However, I am not sure how to implement it.
Are there any recommended ways to use an OAuth2 API in my application?
The API that I am using does not specifically say that it supports PKCE. However, I have heard from some sources that it does. If it does not support PKCE, how do I still create a secure app infrastructure that will pass App Store Review?
At a more basic level, what is the difference between OAuth2 and PKCE? What should I use in my app? Are there any resources to learn a little bit more about these protocols so that I understand them better?
Thanks!
Our app uses ASWebAuthenticationSession for login.
This launches an incognito (ephemeral) browser window of the system’s default browser with the authentication URL.
Recently, on the latest macOS Tahoe, we observe that:
The browser application is launched(we could see in the dock)
But the authentication window with the URL does not appear
No error is returned to the app (silent failure)