On iOS (iPhone or iPad) the following behaviour happens:
when both an HTML video element and an HTML audio element are playing on a page,
and the video source ends,
and the video source is programmatically forced to play again
then the system will automatically pause the audio.
See following stackblitz project for a sample:
https://stackblitz.com/edit/ios-audio-paused-on-video-playing?file=README.md
Steps to reproduce
Feel free to try with both another audio and video source, here limited by the available space in Stackblitz plan.
On an iPhone/iPad device or simulator, in Safari:
browse to index.html
when on iPhone, press iPhone Load to force preloading video. Not needed on iPad
press Play to start playing both audio and video
wait until clip ends and then restarts from 0:00
Expected
Audio should keep on playing and eventually loop.
Actual
When clip restarts from 0, audio is put to pause by the system.
Further details
This does not happen e.g. on Mac Safari nor on another device/browser.
Also, some alternative scenarios:
when HTML video element has the muted attribute, the issue disappears and audio is not paused
when HTML audio element is replace with Web Audio API, the issue disappears and audio is not paused
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
Is there a way to read all URLs of the currently open Safari TabGroup from a Safari Extension? In macOS and iOS
I'm encountering an issue with ReactPlayer where videos fail to play when the playback rate is set to 3x, but this problem only occurs on iOS. The same functionality works perfectly fine on Android devices and desktop browsers like Chrome and Firefox.
Here are the details of my setup:
ReactPlayer version: 2.16.0
Video format: [MP4, hls ]
Tested devices: iPhone 13
Expected behavior: Videos should play smoothly at 3x speed.
Actual behavior: Videos fail to load or play when playbackRate is set to 3.0.
I've read that iOS Safari might have limitations regarding playback rate due to performance or energy efficiency, but I couldn't find any official documentation to confirm this.
If anyone has faced a similar issue or knows the root cause (or a workaround), I'd really appreciate your insights. Additionally, if there are official resources or documentation about playback rate limitations on iOS Safari, please share them.
Thanks in advance for your help!
Topic:
Safari & Web
SubTopic:
General
For many years, I've noticed that although in native code I can handle continuous and simultaneous Apple pencil and touch inputs using UIKit, Safari and WKWebView's PointerEvents only seem to allow you to use one input type at a time. i.e. Apple Pencil down blocks touch input until lifted and touch input blocks Apple Pencil input. It's as though requiresexclusivetouchtype has been set in the underlying webkit implementation. There's decades of research (e.g. https://dl.acm.org/doi/10.1145/1866029.1866036 ) and several existing native applications in production showing that multimodal inputs open-up many unique and useful applications and interactions. Even a simple "hold object with finger" + "draw with stylus" controls are the norm. I recently built a native application using multimodal simultaneous inputs, but this is impossible to port to web due to the unexpected behavior of PointerEvents (and touch events, and mouse events; any variant exhibits the same behavior). I've researched and attempted to apply every possible flag, change, and css code to get this working, but I think the behind-the-scenes implementation is what's blocking the simultaneous touch types.
This is unexpected and undesired behavior because it's inconsistent with the native behavior. If it's unintended, it's a big priority to fix for creating better user experiences on the iPad. If it's intended, I do not believe that's reasonable (even if it might be more complex and used for more advanced applications). Please expose a way to support simultaneous touch types in iPadOS/iOS in both Safari and WKWebView.
At minimum, may we have a discussion on how to support the desired behavior? The simplest solution I can think of is to provide a webkit-platform-specific boolean in Safari and WKWebView called requiresExclusiveTouchType, which is set to False by default to keep the current behavior, and settable to True to get the more flexible behavior I'm expecting.
I'm developing an application that needs smooth framerates within a wkwebview that interacts with native code. However, requestAnimationFrame by default is still throttled to 60hz even if all my target devices (the iPad Pro for example) have supported 120hz for a long time already. I noticed that the latest Safari in 18.3 beta supports unlocked framerates, but that's only under Safari feature flags. To my knowledge, these flags do not apply to WKWebView. Is there a way to enable unlocked framerate in WKWebView via requestAnimationFrame? (Calling JS at a faster rate from the native code side will not work, almost definitely, since WKWebView will still render at its own rate.)
This is an experimental application for internal use and I'm okay if there are temporary beta solutions available.
We're using the PaymentRequestAPI, and to my surprise I see that if we open the payment dialog then don't interact with it - biometrics to approve or cancel/X button - it sits there open indefinitely.
Is there any way to tell it to only sit there for some limited time period before canceling?
Using the PaymentRequestAPI, I see this request element listed, but I can't find any description what these features could be:
sequence <ApplePayFeature> features;
https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase
https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase/4224914-features
Hey there.
I recently completed an Apple Pay (on the web) integration and it has been working fine, for the most part. I had one customer contact us saying that it didn't work on his devices though. I checked it out, and while it does normally work (and we've had over a thousand transactions use it) there does seem to be some scenarios where it fails and I'm not sure why.
I was able to replicate his issue (or at least an issue) by using BrowserStack. When I click the button which should initiate the payment, everything works in the JS code until it gets to the applePaySession.begin() function call. Once it hits that, it just stops. No errors are generated and no notice is given that anything is wrong until you try to do it a second time. Then an error about a payment session already being active on the page is thrown.
I'm not really sure how to troubleshoot this since I know it works on my old iPad Air 2, my current M4 Macbook, multiple other devices, and also works when scanning the QR code for use on an iPhone.
There is some very specific thing with some very specific versions of Safari that seem to be tripping it up.
If it helps, the version of Safari on the BrowserStack device is 18.1, but the version on my Macbook is 18.1.1. The version the customer who is having the issue is on is 18.2 according to him.
The customer also says they have used ApplePay on other websites with no issues. I checked one of them and they appear to be using a PayPal integration, where as I am using the ApplePay SDK straight from Apple.
There are quite a few variables at play here, and I'm just trying to narrow down what I should be looking at. If one person is reporting the issue, there are probably others with it as well.
Since iPadOS 18.x WKWebView seems to have a bug within its Fullscreen API (which can be enabled via WKPreferences.isElementFullscreenEnabled). This bug has the effect that websites trying to make an element (for example a video player) fullscreen fail to do so. This does not always happen, most of the time the fullscreen mode does work fine, but sometimes (far too often to be ignored) it does not. If an instance of WKWebView shows this issue, it can not be "fixed" by reloading the page or loading other pages, this issue exists in this instance forever.
My App is a web browser App so I can create and remove WKWebView instance easily (by opening or closing Tabs). And there are times where I never see this bug, and times where ever other tab shows this bug. It's totally unreliable.
The App does not show any issues at all when running under iPadOS 17 or older. The issue is only present under iPadOS 18.x.
After some testing I've found out that when the bug has affected an instance of WKWebView, the JavaScript call element.requestFullscreen() will work if the element is a video element, but does no longer work if it is another element (like a DIV). If an instance of WKWebView is not affected by this bug, element.requestFullscreen() will work for all HTML elements.
Does anyone has experienced this bug as well? And maybe found a workaround? Or maybe found a pattern which helps to find out what exactly is triggering this bug?
Hi everyone,
We're facing a challenge with Apple's WKWebView and its WKAppBoundDomains limit.
Our web app is hosted across multiple dedicated domains to ensure security and isolation for our customers. Additionally, we rely on a service worker to provide offline functionality within our app. To enable the service worker in our WebView app, we must specify the domains within the app-bound domains list.
The issue we're encountering is the 10-domain limit, which is restrictive since our app needs to support access to more than 10 domains.
Has anyone found a workaround for this limitation? Or does Apple provide any exceptions to this rule if a strong case is presented?
We’d greatly appreciate any insights or experiences you can share. Thanks in advance!
Topic:
Safari & Web
SubTopic:
General
I'm having issues with opening up role="link". links in wkwebview. Is there a way in my decideforpolicy to allow these links to open up in the current webview vs another window like a traditional web browser does? Thank you ahead of time.
Apple Pay fails with an "AbortError" when the dialog for the fingerprint sensor opens.
How do I find the cause of the "AbortError" which only occurs in the web integration in our production environment?
In the sandbox environment, Apple Pay works flawlessly. This concerns a web integration of Apple Pay using the Apple Pay SDK, one version before 1.2.0. The error occurs when I call the show() method on the PaymentRequest object. The Apple Pay dialog opens with the fingerprint icon, but after one second, an exclamation mark appears, and the Apple Pay dialog closes again while throwing the "AbortError".
I know that our Apple Pay integration worked for multiple customers in the production environment already. The current problem is that Apple's error message, called "AbortError," provides no indication of the cause. This could be greatly improved.
One affected customer, for example, is the one with the Merchant ID … (Is it safe to post a Merchant ID in this forum?) I can reproduce the "AbortError" issue at any time using my iPhone with iOS 16.7.8.
I'm building a share extension for my app when I noticed something weird.
When I open a mobile URL (URLs with "m." like m.randomsite.org) on iOS using a browser (I'm using Safari & Chrome) and then try to share it, what will be share is the URL without the "m." (i.e. randomsite.org)
This messes up with my app since I'm not getting the real URL that I'm viewing using the browser.
I don't think it has something to do with my app since even selecting "Copy" when sharing will result in the altered URL too.
So far this is happening on both iOS 17 and 18. Does someone know whether this is a bug from iOS or not? I don't think this is a Safari bug since I noticed the same thing on Chrome as well
Hello,
I am studying a possible scenario.
Let's say I create an App Clip that features a WKWebView.
The WKWebView hosts a sort of webapp that uses local storage and IndexDB.
When the complete app is installed, are the data persisted so the WKWebView of the complete app finds them as it was reading them before?
Are the data transferred by the operating system to a new location but still accessed the same way by the WKWebView (Or even the location is the same because it is the WKWebView special storage)? Or are they wiped out?
Thank you in advance
Best regards
Subject: Apple Pay JS - "Payment Was Cancelled by the User" Issue (Braintree + Server-Side Validation)
Issue
I am implementing Apple Pay using Braintree with server-side validation. However, when initiating the payment process, I receive the following error:
[Log] Payment was cancelled by the user: (apple-pay-test-ucxp.onrender.com, line 286)
Additionally, the console logs an ApplePayCancelEvent with:
sessionError: {code: "unknown", info: {}}
Despite successfully fetching merchant session validation data from the backend and completing merchant validation, the payment process does not proceed.
Setup Details
Payment Processor: Braintree (Apple Pay integration)
Backend API: Fetching merchant session validation via createPaymentSessionGet
Payment Processing: Using Braintree nonce tokenization
Client-Side Code (Key Sections)
session.onvalidatemerchant = async (event) => {
try {
const merchantSession = await fetch(
"https://api.paybito.com:9443/ApplePay/api/apple-pay/createPaymentSessionGet",
{
method: "GET",
headers: { "Content-Type": "application/json" },
}
).then((res) => res.json());
session.completeMerchantValidation(merchantSession);
} catch (err) {
console.error("Merchant validation failed:", err);
session.abort();
}
};
session.onpaymentauthorized = async (event) => {
try {
const payload = await applePayInstance.tokenize({
token: event.payment.token,
});
const response = await fetch(
"https://api.paybito.com:9443/ApplePay/api/braintree/process-payment",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nonce: payload.nonce }),
}
).then((res) => res.json());
if (response.success) {
session.completePayment(ApplePaySession.STATUS_SUCCESS);
} else {
session.completePayment(ApplePaySession.STATUS_FAILURE);
}
} catch (err) {
console.error("Payment authorization failed:", err);
session.completePayment(ApplePaySession.STATUS_FAILURE);
}
};
Observations
Merchant validation completes successfully.
The error occurs before onpaymentauthorized executes.
Session error code is unknown, making debugging difficult.
Questions
Has anyone encountered this issue before?
Could this be related to how the validation session is fetched from the backend?
Is there a way to obtain more meaningful debug information from Apple Pay?
Any insights would be greatly appreciated!
On an older iPhone I'm testing with (6s, iOS 12.5.7), connected to the same Sandbox Apple ID that I'm using on multiple other devices, the Apple Pay button is not appearing. Neither on my web application, whatever version I set in the PaymentRequest, nor on the official demo site.
Further, 2 sandbox cards that were added fine to these other devices are failing to add on this one. Same cards and CVV codes are getting errors. At least "Invalid Card" on one of them. Although the other failed several times, then just worked this time when I tried it again :confused:
But on this phone, I have two cards successfully added, so the button should be appearing. On the demo site, whether I select Apple Pay JS API or Payment Request API, the button does not appear.
Hi there,
I use the Clipboard API to create formatted project links with a "copy link" button. This has been really versatile for end users. When they paste into their email, they get a hyperlinked project name that leads to the project, and when they paste into the URL bar, they just get the project URL.
It used to be that pasting into Messages on Mac would yield the same behavior as pasting into the URL bar. But recently, Messages started only pasting the inner text of the HTML clipboard, so no URL, just the project name, which isn’t very useful for a copy link function.
Is there any way to ensure that Messages pastes the URL while maintaining my formatting options on other surfaces?
Hello All,
On our iOS app, we plan to show tutorial (WKWebview) only in case user has safari extension disabled.
How can iOS app know about status of Safari extension.
Thanks,
Anup
We seem to be having an issue with a webservice here which is used within our network and IOS Safari. For the service to work , we need to access it with an unencrypted HTTP API call, which acts as a trigger. The server does not respond to HTTPS requests. (the HTTP API call does not contain any data that is privacy sensitive or that can be abused)
Since recently the service does not seem to work anymore properly, but this only happens with Safari and IOS. With all other browsers the service is still working normally, only with Safarai it fails.
No matter what I do in the settings of the phone, the Safar browser seems to stop immediately after the HTTP request. What is going on here ??
The issue seems to occur only when you don't have an iCloud+ account. With an iCloud+ account I get the same issue when you switch Apple Private Relay on, but that make sense. When I have Apple Private Relay switched off, there is no issue.
Topic:
Safari & Web
SubTopic:
General
In my content blocker I have a bunch of rules that block some content in Safari, but I want my users to be able to whiltelist a website so the blocker rules don't apply on that site.
I have something like this:
{
"action": {
"type":"css-display-none",
"selector":"a[href*='Bobbins']"
},
"trigger": {
"url-filter":".*"
}
},
{
"trigger": {
"url-filter": ".*",
"if-domain": ["*mydomain.com"]
},
"action": {
"type": "ignore-previous-rules"
}
}
I think that should block any a link where the href includes Bobbins but not if the site is mydomain.com. However, that simply doesn't work. It doesn't matter what I put in the array of domains to whitelist, it just doesn't apply it. In every case, the a link is blocked.
How do you actually whitelist a website in a Safari content blocker?