Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

General Documentation

Posts under General subtopic

Post

Replies

Boosts

Views

Activity

Is Picture in Picture supported for WebRTC / WebView video on iOS (outside app)?
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.
Topic: Safari & Web SubTopic: General Tags:
0
0
82
4w
Safari Should Allow Background WebRTC for Real-Time Audio Apps
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
0
1
303
Feb ’25
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
403
Feb ’25
WKWebView + Cookie
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
0
0
305
Dec ’25
Custom WkWebsiteDatastore
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.
Topic: Safari & Web SubTopic: General Tags:
0
0
69
Mar ’25
iOS 26.2 RC2 Bug with HTML-Mail
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
0
0
131
Dec ’25
Tab Bar Transparency Problem on iOS 26
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
0
0
277
Dec ’25
Fairplay license with lease/rental expiry not stopping playback after license expires
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!
0
1
194
Dec ’25
Do page img-src CSPs apply to Safari WebExtension content scripts injected HTML img tag?
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.
0
0
586
Feb ’25
WKWebView Entitlements
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!
0
0
138
May ’25
Disable Smart Punctuation from Webpage
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.
0
1
122
Mar ’25
iOS Safari Rendering Issue: Sticky Header Sometimes Fails to Update After DOM Changes
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; }
Topic: Safari & Web SubTopic: General Tags:
0
0
124
Dec ’25
AdTag URL - on learn more action - Redirects to External Safari Browser - Need to lock orientation to Portrait Mode
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
0
2
109
Jun ’25
Public API to Open Safari Settings in iOS Browser
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
Topic: Safari & Web SubTopic: General Tags:
0
0
136
Oct ’25
mediaDevices.getUserMedia ignores channelCount with echoCancellation off.
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
0
0
100
Oct ’25
Safe area issues on iOS 26 on website using WordPress plus elementor pro
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
0
0
248
Oct ’25
First installation of the extension - sending messages to the background script from the event handler in the content script does not work
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
0
0
163
Oct ’25
使用Apple Pay Web构建的应用无法支付底部转圈圈问题
我使用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/
0
0
104
Apr ’25