Hello,
I am implementing video calling on iOS and need to support Picture in Picture (PiP) behavior similar to FaceTime or WhatsApp.
What works
Audio continues correctly in background
CallKit UI works as expected
Video works correctly while the app is in the foreground
What I’m trying to achieve
When the user presses the Home button or switches apps, I want to show a system Picture in Picture window (floating video outside the app).
Current setup
Video is rendered via WebRTC
The video is displayed inside a WKWebView (HTML / JavaScript)
PiP works only while the app is foregrounded
When the app backgrounds, the video disappears (only audio remains)
Questions
Does iOS support system Picture in Picture for:
WebRTC video
WKWebView / HTML video
2 Is AVPictureInPictureController limited only to:
AVPlayerLayer
AVSampleBufferDisplayLayer
3 If PiP requires native rendering:
Is it mandatory to render WebRTC frames natively using AVSampleBufferDisplayLayer?
Is PiP explicitly unsupported for WebView / HTML video?
📌 Clarification
Apps like FaceTime and WhatsApp are able to show PiP outside the app.
I want to understand whether this behavior is achievable only with native video pipelines, or if WebView-based video is fundamentally restricted by iOS.
Any official clarification or documentation reference would be appreciated.
Thank you.
General
RSS for tagExplore 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
WebRTC and Web Audio are essential for modern web applications, powering everything from real-time voice communication to accessibility tools. However, in iOS Safari, these technologies are suspended as soon as the screen locks or Safari goes into the background. This makes web-based calling, live audio spaces, broadcast sessions and assistive applications unreliable for iOS users.
Why This Matters:
It’s impractical and inefficient. Asking users to keep their screen on to continue a WebRTC call wastes more battery, as the display is one of the most power-intensive components of a device. Allowing WebRTC audio to run in the background would be more battery-efficient than forcing the screen to stay lit for extended periods.
Competing platforms allow WebRTC to run in the background. Safari’s restriction puts web-based applications at a disadvantage compared to native apps.
Many industries depend on persistent WebRTC audio, including telehealth, live broadcasting, and accessibility tools.
This restriction forces developers to build native iOS apps instead of using the open web, limiting web innovation and increasing development costs.
Proposed Solution:
Apple could implement an explicit user permission for background WebRTC, similar to how background audio playback is already handled for media apps. This would balance user security with the need for uninterrupted real-time communication—without forcing users to keep their screens on unnecessarily.
I would love to hear if anyone has found workarounds or if Apple has commented on potential improvements in future iOS versions.
Topic:
Safari & Web
SubTopic:
General
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?
hi, I'm having an issue with Safari devlop menu "Web Extension Background Content" menu item being grayed out. I cant do any debugging right now and its becoming mission critical for us. Any help is appreciated.
Thank you,
Topic:
Safari & Web
SubTopic:
General
Tags:
Extensions
Web Inspector
Safari Developer Tools
Safari Extensions
Description:
In our app, we have login page which displayed in WKWebView. In that page, there is an Remember my Device cookie option which user can select, so next time it OTP page will not be displayed.
Problem Statement:
Recently we found that some issue happened with this cookie. Especially, when users upgraded their OS versions to 18.6 or 26.1 or 26.2.
Need to understand, any changes related to Cookie part in latest OS Versions?
Topic:
Safari & Web
SubTopic:
General
Hey team, I've integrated custom WkWebsiteDatastore to manage profiling for different sessions.
upon testing the WkWebsiteDataStore as its mentioned to be persistent But
The storage can be accessed via identifier, But the session data in storage is absent, such as cookies caches all are cleared when app is relaunched
is it the default behavior to be expected or there is some property missing causing the session data to be removed from storage.
Hello,
can't find a better Forum and after all this is Apple Support here?
Seems starting with iOS 26.2 RC2 our Newsletter is no longer rendered 'responsive' so with unuseable small font.
Anybody any suggestion? Or maybe @apple fix the bug?
Where would I even start to debug this? I don't have any iphone at hand so i only got screenshots from users.
Our where can i contact the actual apple support?
correct:
invalid:
Topic:
Safari & Web
SubTopic:
General
i have programmed a website and struggle to get it to work on safari ios26. 100vh fixed positioned images do not fill the screen anymore. i could live with that, having two background coloured spaces at the top and at the bottom. but elements that scroll out of this new viewport are fully visible, as you can see on the enclosed screenshots. i have no idea how i could fix this and dont find any answer anywhere on the net?
Topic:
Safari & Web
SubTopic:
General
Hi there
I've been having trouble finding any details around how safari is supposed to behave when a FairPlay license expires. My assumption was that the video segments would stop getting decrypted and playback would stop, however I just see that the playback continues like nothing has happened.
I've setup the "fps_safari_has_key_renewal.html" sample code from the Fairplay SDK and got encrypted playback working. The renewal method also appears to work. However, if I don't issue a renew call, or if I wait several minutes after the renew has succeeded the video never stops (my license is set with a 1 minute expiry so I can test this quickly).
I've also observed that the MediaKeySession expiration property is always set to NaN even though my license has an expiry. I've tried with both Lease and Rental expiries set in the license (separately AND at the same time in separate tests). I'm using EZDRM as my drm provider.
Just looking for some feedback on if this is supposed to work this way in safari or if license expiry isn't supported in safari.
Thanks!
I am currently developing a Chrome, Firefox and Safari web extension, and I am facing a CSP issue on the content script on Safari.
The extension I develop has a content script that injects an img tag in the DOM of web pages the user is visiting. That img tag fetches its content at a specific URL.
On Chrome and on Firefox, the img tag content fetches the content at the URL with no issue on every web pages, including those that set the CSP header img-src.
On Safari, I'm getting the following error on web sites that set the img-src CSP header:
Refused to load https://axxlfrmnpq.cloudimg.io/www.macifavantages.fr/wp-content/uploads/2021/06/Garmin-logo.png?func=bound&w=225&h=113 because it does not appear in the img-src directive of the Content Security Policy.
Here is the actual CSP img-src header content of the web page where, on Safari, the injected img tag does not load the content at https://axxlfrmnpq.cloudimg.io/www.macifavantages.fr/wp-content/uploads/2021/06/Garmin-logo.png?func=bound&w=225&h=113:
Content-Security-Policy: img-src https://secure.adnxs.com https://www.facebook.com https://.garmin.cn 'self' data: .garmin.com .trustarc.com .truste.com https://static.garmincdn.com https://www.google.com https://www.google.co.uk https://prefmgr-cookie.truste-svc.net https://res.cloudinary.com https://res.garmin.com https://.criteo.com https://.doubleclick.net https://www.googleadservices.com https://px.adentifi.com https://rtb.adentifi.com https://.teads.tv https://www.googletagmanager.com https://bat.bing.com https://.yahoo.com https://sync.outbrain.com https://*.google-analytics.com https://stats.g.doubleclick.net https://static.hotjar.com https://script.hotjar.com .akamaihd.net https://.tealiumiq.com https://deploytealium.com https://pixel.mediaiqdigital.com;
My question is, is the page CSP blocking the img tag injected in the web page by the extension's content script?
If so, is this behavior documented somewhere, or is it a Safari bug?
I saw there is a similar post on the forum, but I couldn't find if the issue is a bug or if it's the expected behavior on Safari: https://developer.apple.com/forums/thread/651542?login=true.
Thank you very much for your help.
Hi all,
I'm developing an application that uses WKWebView to display a web application which I augment with iOS native utilities such as Speech to Text and IAP. The application also uses Service workers, so we define AppBound Domains in the info.plist file.
Everything works for this, but when we deploy on a device the application will crash and say we need these entitlements
com.apple.developer.web-browser-engine.networking,
com.apple.developer.web-browser-engine.rendering,
com.apple.developer.web-browser-engine.webcontent,
com.apple.runningboard.assertions.webkit
From what I can see, we do need all of them. However Apple suggest submitting a request to be an Altnerative Browser (https://developer.apple.com/support/alternative-browser-engines)
This is not appropriate for the application in my view since one requirement of being an alternative browser is that you don't modify the resources on the web site - we of course do since we inject javascript in order to bridge between iOS and the contents of the webview.
How are people navigating this issue? I assumed it would be common given the use of Tauri etc. to build similar types of applications, but I don't see much about it.
Thank you!
I would like to know if there is a way to disable Smart Punctuation from the webpage rather than requiring the user to do so from the settings. Adding a "inputmode=verbatim" attribute to the input HTML tags for my webpage did that for all the web browsers I tested on Windows, Ubuntu, Android, and MacOS. I tested Chrome and Firefox on all platforms, as well as Edge on Windows and Safari on Mac and iOS. So far the only time it did not disable Smart Punctuation was on Safari on iOS, but it did on MacOS.
I’m encountering an issue on iOS when rendering a list using React.
Each list item uses the array index as the React key and consists of two parts:
a header section that uses position: sticky for dynamic sticking behavior, and
a body section whose height is automatically adjusted based on its content.
When the list data is updated, I sometimes observe that the sticky header content does not update visually in time, even though the underlying data and DOM have changed.
// demo.jsx
import React, { useState } from 'react';
import { Button } from '@iftide/mobile';
import './style2.less';
// import data1 from './data1.json';
// import data2 from './data2.json';
const prefixCls = 'im-detaillist';
const data1 = [
{
sectionTitle: '2025年05月'
},
{
sectionTitle: '2025年04月'
},
{
sectionTitle: '2025年03月'
}
];
const data2 = [
{
sectionTitle: '2023年08月'
},
{
sectionTitle: '2023年07月'
},
{
sectionTitle: '2023年06月'
},
{
sectionTitle: '2023年05月'
}
];
export default function App() {
const [list, setList] = useState(data1);
const [toggle, setToggle] = useState(true);
return (
<div>
<Button
title="更新2"
onClick={() => {
setToggle(!toggle);
setList(data2);
}}
/>
<div className={`${prefixCls}-container2`} style={{ height: `700px` }}>
{list.map((section: any, sectionIdx: number) => {
return (
<div
className={`${prefixCls}`}
key={String(sectionIdx)}
// id={section.sectionTitle}
>
<div className={`${prefixCls}-section-title`} role="text">
{section.sectionTitle}
</div>
<div
style={{
background: 'green',
height: `${Math.ceil(400 * Math.random()) + 50}px`
}}
>
省略
</div>
</div>
);
})}
</div>
</div>
);
}
.@{prefixCls}-section-title {
position: sticky;
position: -webkit-sticky;
will-change: transform;
top: 0;
z-index: 1;
padding-left: 11px;
width: 100%;
height: 30px;
font-size: var(--font-size-s);
font-weight: 400;
line-height: 30px;
color: #000000;
background-color: #F4F5F7;
letter-spacing: 0;
}
We’re currently working on an OTT-based application where we integrate Google Ad Manager to serve video ads. As part of the ad experience, users often see a “Learn More” CTA (Call to Action) on these ads.
As per our current requirement, when a user taps “Learn More” on an ad:
• The link should open in Safari (i.e., an external browser) on iOS devices
• The Safari browser should ideally open in portrait orientation, as the ad content and layout are optimised for portrait mode
However, based on our understanding and technical constraints on iOS, it appears that:
• Orientation control is restricted to the app’s own context.
• Once Safari is launched via UIApplication.shared.open, we no longer have control over how it behaves in terms of orientation.
• iOS system behaviour determines Safari’s orientation based on the device’s physical orientation and Safari’s own internal configuration.
Could you please confirm if there’s any supported way (via SDK, deep link config, or otherwise) to enforce portrait orientation in Safari when opening such external URLs from within an iOS app?
If this is not technically feasible, we would appreciate any best practices or alternatives you can suggest for ensuring a consistent user experience.
Topic:
Safari & Web
SubTopic:
General
Dear Apple Developer Support,
I’m developing a Chromium-based iOS browser and want to open the Safari settings page (Settings → Apps→ Safari) like Chrome’s “Import data from Safari” feature, where clicking “Go to settings” opens the Safari settings page.
To reproduce this behavior in Chrome:
1.In Chrome, search “Import password from Safari.”
2.Restart Chrome.
3.Go to Chrome → Settings → Safari import → Import to Chrome → Go to settings.
4.You will see it opens Settings → Apps → Safari.
Please see the attached file for steps to trigger this feature in Chrome.
My attempt with App-Prefs:root=SAFARI only opens the Settings main page ,Is there a public API to open the Safari settings page directly?
Look forward to your reply,many thanks
I understand that you want echoCancellation and noiseSuppression in most cases, but I would like to be able to turn off all the filter processes for this particular use case.
When I set echoCancellation: false in navigator.mediaDevices.getUserMedia, Safari 26 on MacOS produces stereo recording even if I set channelCount: 1.
When I set echoCancellation: true, it produces mono recording as expected.
How can I get mono recording with echoCancellation: false and channelCount: 1?
Thanks!
Topic:
Safari & Web
SubTopic:
General
I have a website I’m working on that uses WordPress and element mentor pro. Basically everything is custom HTML in individual containers and custom CSS for each page.
The problem that I’m running into is there needs to be a pop-up and the easiest way to do that is just use the element or proper pop-ups however, the overlay is not extending into the safe areas on the bottom or top notch. I’ve been trying to figure out a way to fix this, and I cannot get it to work. I’ve tried having CSS in every imaginable way to get it to extend the overlay..
The other issue is for this website there is no header. It’s just a container that’s the hero content and for some reason that also will not extend into the top-notch safe area. It extends to the bottom notch just fine but not the top notch and there’s just a white bar there where I prefer it be the background gradient that I have set up for the hero however, nothing I do will get it to push into that top notch safe area either.
Hoping someone else had this issue and can help me out
Topic:
Safari & Web
SubTopic:
General
Posting this here since Apple Discussion Forums kept deleting this citing it was a "developer issue" even though it's not and there's no way to appeal. Can someone help me?
I can't get 2FA SMS/Email Codes to autofill in Brave or Chrome as of this writing. Has anyone else had this issue?
Topic:
Safari & Web
SubTopic:
General
After the first installation (out of AppStore) of the extension in the browser, the content script is correctly inserted into the page (twice for some reason) and a message is sent from the root of the content script to the background script, which responds correctly.
However, if an event handler is registered within the content script, within which the message is also sent to the background script, it will never reach the background script.
window.addEventListener("message", function (event) {
// We only accept messages from ourselves
if (event.source !== window) {
return;
}
if (event.data.source && event.data.source === appIdentification) {
browser.runtime.sendMessage(event.data);
}
}, false);
It does not matter with what delay the event handler is called (i.e. the background script is not asleep). If I refresh the page or close and reopen the browser and reload the page, everything works correctly and the message sent from the event handler is already delivered to the background script.
The event handler is used so that the extension code is uniform for all browsers (Chrome, Safari, Edge, Opera, Firefox), i.e. it is not intended to use externally_connectable for sending messages from the webpage directly to the background script, which Safari should support. The expected behavior is that the extension will work even after the first installation, as is the case with other browsers.
Procedure:
Enter the test website: https://www.mssf.cz/testapp/check_client.aspx
Do the initial installation of the extension (could be downloaded from here: https://1drv.ms/f/c/76f4c93826df41a0/Ej5MQX9ctyhHv_P9_t_6uAwB05ET-nzXuMhPeu56nOgkWg?e=cudqRJ)
Set a breakpoint in the event handler for "message" within the content script, open the background script and set a breakpoint in the event handler for onMessage
Click on the "Validate certificate" button on the page loaded in point 1
Step through the content script to the point where the message is sent to the background script, the breakpoint within the background script is never hit, which is an error, the message should come to the background script
我使用Apple Pay on the Web Interactive Demo构建了一个web应用使用的是Payment Request API方式,但是遇到了几个问题:
拉起的web Apple Pay 底部一直转圈圈无法付款,这个是什么问题?
如何设置sandbox测试付款呢?
如何异步、同步获取支付结果(后端代码获取支付结果)?demo只有await response.complete("success");前端代码获取支付结果的操作
demo网址: https://shop.wowseer.com/rsolomakhin/pr/applepay/