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

Created

Safari Low Power Mode Video Playback Issue
Hello Friends, This is my first post so would love any suggestions on how to make posts here. So I have a shopify widget which is type of clone for Instagram stories, with videos but I noticed some issues where my videos are kind of unresponsive or just shuts down. Below is the screen shot of the issue: This problem I noticed on iPhone 11 Pro on clients phone, the IOS version is below 26. Some times my iPhone 13 also faces same issue but only when battery is low and multiple heavy apps are opened. Attached a code block also: {validStories.map((story) => { const videoUrl = extractVideoUrl(story.sv?.[0]?.m); const storyThumbnail = story.tu && story.tu.length > 0 ? story.tu : null; const videoThumbnail = story.sv?.[0]?.m?.[0]?.t && story.sv[0].m[0].t.length > 0 ? story.sv[0].m[0].t : null; const thumbnailUrl = storyThumbnail || videoThumbnail; const hasThumbnail = !!thumbnailUrl; const isPlaying = playingVideoIds.has(story.i); const shouldRenderWrapper = hasThumbnail || isPlaying; return ( <div key={story.i} className="ins-story-item" onClick={(e) => { handleActiveStoryChange(story.i, e); handleActiveVideoId(story.i); }} style={{ position: "relative", zIndex: 1 }} > {shouldRenderWrapper && ( <div className="ins-story-circle-wrapper" style={{ position: "relative", overflow: "hidden" }} > {hasThumbnail && !isPlaying && ( <img src={thumbnailUrl} alt={story.t} className="ins-story-image" onError={() => { console.log( `[Story ${story.i}] Thumbnail failed to load: ${thumbnailUrl}` ); }} /> )} <video src={videoUrl} className="ins-story-video" autoPlay={true} muted playsInline loop onLoadedData={() => handleVideoPlaying(story.i)} onPlaying={() => handleVideoPlaying(story.i)} onError={(e) => { console.log(`[Story ${story.i}] Video error`, e); }} /> </div> )} {story.t !== "New Collection" && ( <span className="ins-story-title">{story.t}</span> )} </div> ); })} </div> {activeStoryId && <StoryModal />} </>```
0
0
112
1d
Mobile App OIDC/SAML Login Failures and ITP
We operate a native iOS app that authenticates users via the system browser using OIDC against a 3rd party SaaS authentication broker, which then performs authentication against the individual customer IdPs using SAML within the browser session, and then completes the OIDC login between the broker and our application. Our application initiates the OIDC login using ASWebAuthenticationSession, using the broker’s library, against the broker, and at that point the authentication workflow is handled by the broker. At the beginning of the login session, the broker sets a session-identifying cookie for their domain, before redirecting the user to their company’s identity provider to authenticate, which then redirects the user back to the broker. Intermittently, Mobile Safari does not include that previously set cookie on the final communication with the broker, when being redirected from the IdP as the final step of the SAML portion of the login workflow. When the cookie is missing, the broker cannot correlate the authentication response to the original request and the login fails, even though the user successfully authenticated at their identity provider. The same user can sometimes find success after retrying on the same device minutes later, without any changes. When we first started diagnosing this issue, we were seeing about a 20% rate of these errors across all Mobile Safari logins, which we can identify fairly conclusively (from provider logs, based on their guidance) as being caused by the session cookie set in one request not being provided on the subsequent request to the same domain. Our authentication broker provider has indicated, based on their server logs, and logs from an affected device, that this behavior is caused by Mobile Safari’s Intelligent Tracking Protection (ITP) causing Mobile Safari to not send the login session cookie to the broker when handling the SAML redirect from the IdP back to them. Our authentication broker provider recommended that we switch the SAML Request binding setting from POST to Redirect in the SAML configurations against our customer IdPs, which reduced the rate of these errors to about 5% for most of our customers. However, we have at least one customer which is still seeing about a 20% rate in these errors for Mobile Safari logins after this change, and even a 5% error rate seems high. Our authentication broker has not been able to suggest any further remediation options, and has suggested we contact Apple for assistance. Our questions are: Is it reasonable to assume that ITP is causing this issue? Is there any way to confirm, conclusively, that ITP has caused a previously-set cookie to not be provided on a subsequent request to the same domain, i.e. via device logs? If so, are there any steps which can be taken to reduce or eliminate this error? Changes to how ASWebAuthenticationSession is invoked? Changes to the Authentication Broker which would reduce the chance of ITP being triggered? Changes to the Customer IdP configuration which would reduce the chance of ITP being triggered?
0
1
181
1d
CSS filter produces incorrect colors in iOS 26.2 WebView (works fine on iOS 18.6.2)
I'm using a CSS filter to achieve dark mode for my HTML page. I know it's imperfect, but I have no choice for many reasons. However, I found that the CSS filter produces incorrect colors in iOS 26.2 WebView, while it works fine in iOS 18.6.2 WebView. Here is my HTML and CSS filter: <html> <head> <style> .filter_container { /* invert colors for the entire page */ filter: invert(1) hue-rotate(180deg); } .filter { /* restore colors for specific elements, such as img */ filter: hue-rotate(180deg) invert(1); } </style> </head> <body> <div>original & bgcolor+filter & img+filter</div> <table> <tr> <td> <div style="display:flex; gap:1px; align-items:center; justify-content:center;"> <div class="origin_container"><div class="origin" style="background-color:#FFFFFF; height:60px; width:60px; border-style: solid; border-color: #000000; border-width: 1px;"></div></div> <div class="filter_container"><div class="filter" style="background-color:#FFFFFF; height:60px; width:60px; border-style: solid; border-color: #000000; border-width: 1px"></div></div> <div class="filter_container"><img class="filter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAdklEQVR4nOXOQQEAIACEMKR/57OFPliCnW0jRGIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkxt+B1y6HmAR0uIzOQQAAAABJRU5ErkJggg==" style="height:60px; width:60px; border-style: solid; border-color: #000000; border-width: 1px"></img></div> </div> <div style="text-align:center;">#FFFFFF</div> </td> ...many other colors </table> </body> </html> It works fine in iOS 18.6.2 WebView: But renders incorrectly in iOS 26.2 WebView:
Topic: Safari & Web SubTopic: General Tags:
1
0
199
3d
Is iOS webrtc communication based on webview stable when app is background
Is iOS WebRTC communication via WebView stable when the app is in the background? I'm implementing SIP communication using JsSIP within a WebView. On iOS, I'm using WKWebView, but I'm concerned that its resources may be limited by the system when the app is backgrounded. Even with the VoIP background mode declared in the Info.plist file, will the system preserve sufficient resources to keep the SIP communication active?
Topic: Safari & Web SubTopic: General Tags:
0
0
111
3d
Video/audio pauses automatically in WKWebView after app returns from background
We are embedding TikTok Live streams inside our iOS app using WKWebView. The Live stream loads and plays normally at first. However, when the app goes to the background (for example, user presses the Home button or switches apps) and then returns to the foreground, the TikTok Live video and audio become paused and do not resume automatically. Expected behavior When the app returns from the background to the foreground, the video/audio should resume playback automatically Actual behavior Video/audio pauses after app resumes from background Any guidance would be greatly appreciated. Thank you.
Topic: Safari & Web SubTopic: General Tags:
1
0
240
3d
Animation Ghosting with animation-timeline on 120HZ ProMotion Devices
On iOS Devices with ProMotion (120HZ) if you animate Elements on your Page with animation-timeline you get Ghosting Effects. You can not see the Ghosting with a Simulator or on Screenshots, only on real Devices. To Reproduce I made a Minimal Example: https://codesandbox.io/p/sandbox/120hztest-xrwgtc When you scroll quickly on the Page with an iOS 120HZ Device (https://en.wikipedia.org/wiki/List_of_smartphones_with_a_high_refresh_rate_display) you will see ghosting on the Top of the right Element (animation-timeline) and no ghosting on the other animated Element. (I edited the Screenshot, to Illustrate how the Effect looks like, since it is only visible on the real Display)
2
0
208
1w
Cookie Missing After App Upgrade During OAuth Consent Flow on iOS (Safari ITP?)
Scenario Overview: In our app, we open an in-app browser to complete a third-party consent flow. The sequence is: App → Website A (set cookie and redirect) → Google → Website A (check cookie) → App After upgrading the app, the first consent attempt fails because the cookie cannot be written, causing the check cookie step to fail. However, if we use the native Safari browser, this issue does not occur. Observed Behavior: Scenario Result Upgrade app → Consent ❌ Fail Upgrade app → Consent fail → Consent again immediately ✅ Pass Upgrade app → Consent fail → Upgrade again after 1–2h → Consent ✅ Pass Upgrade app → Consent fail → Upgrade again after 1d → Consent ❌ Fail Install a new app → Consent ✅ Pass Upgrade app → Consent, cancel flow → Consent again ✅ Pass Install new app → Wait for upgrade → Upgrade app → Consent ✅ Pass Install new app → Wait 1–2h → Upgrade app → Consent ✅ Pass Investigation: From Safari documentation, this seems related to Intelligent Tracking Prevention (ITP), which restricts cross-site cookie behavior during first-party interactions. However, I haven’t found a clear mitigation strategy yet. Question: Has anyone encountered similar issues with Safari ITP after app upgrades? Are there recommended approaches to ensure cookies persist across this redirect flow?
Topic: Safari & Web SubTopic: General
0
0
47
1w
Does WKWebview support encrypted DNS when using Network.framework PrivacyContext Api?
After App uses Network.framework PrivacyContext Api, dns has been encrypted, that is good. But when using wkwebview to load web page, wireshark captures normal dns request sent by wkwebview. Does wkwebview use DoH to resolve domain? if can, how to config params? If can not, is there anyway to stop wkwebview sending normal dns, such as local proxy.
2
0
215
1w
Update made browsing a headache
It’s the small things that make a difference, and the three dots at the top of the screen in Safari and Chrome are such examples. I’ve already accidentally deleted several tab groups by accident and try to relearn browsing is harder than it should be.
Topic: Safari & Web SubTopic: General
1
0
196
1w
iOS React Native: Can two WebRTC stacks (Wazo & Jitsi) share media?
Hi everyone, I’m building a React Native iOS app where I’m integrating Wazo (native WebRTC) and Jitsi (WebView / WebRTC). Use case: Wazo is used to maintain a background call session (mainly signaling + audio keep-alive). Jitsi is used in the foreground for video calls. Problem: When Jitsi starts, it takes control of the microphone and camera. The Wazo call disconnects after ~5 minutes (likely due to media / audio session conflict). Even if Wazo audio/video is muted or tracks are disabled, the session still drops. My questions: Is it officially supported or recommended to run two WebRTC stacks (Wazo + Jitsi) simultaneously on iOS? Can Wazo stay connected without active audio/video tracks while Jitsi uses mic/camera? Is there a way to release Wazo media streams temporarily (but keep signaling alive) while Jitsi is loading or active? Are there any AVAudioSession / background mode limitations on iOS that make this impossible by design? If this is not supported, what is the recommended architecture (single WebRTC pipeline, switching media ownership, etc.)? Environment: iOS (React Native) Wazo SDK (native WebRTC) Jitsi Meet (WebView) CallKit + PushKit enabled Any guidance, documentation, or real-world experience would be greatly appreciated. Thanks in advance 🙏
1
0
324
2w
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
66
2w
Follow-up: Programmatically detecting "Allow in Private Browsing" for Safari App Extensions
I am following up on Thread (https://developer.apple.com/forums/thread/733233). Currently, SFSafariExtensionManager.getStateOfSafariExtension only returns if an extension is enabled, but not if "Allow in Private Browsing" is toggled on. Is there an API in macOS 26 and Safari 19 that allows a native Safari App Extension to detect this specific permission?
0
0
598
2w
Displaying spatial photos and videos on web pages in Safari
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.
0
0
642
2w
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
299
3w
I have a question about Safari running in the background on iOS and iPadOS.
I coded two demo websites as follows (both written in NextJS): Website 1: I coded an interval counter that increments every 1 second. Website 2: I used the MediaRecorder API (described in the WebKit documentation: https://webkit.org/blog/11353/mediarecorder-api/). In the ondataavailable function, I periodically send a blob (once every 1 second) to my server. In the backend, I coded a POST API to upload this blob. I noticed that with website 1, the interval doesn't work when I run Safari in the background, even on iOS and iPadOS. However, website 2 works, meaning it still calls my API normally (I tried running Safari in the background for about 1-2 hours and it worked). So, does this mean Apple allows native APIs like MediaRecorder and its callbacks to run in the background?
0
0
357
3w
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
118
3w
Steal some The Browser Company Arc browser side tab ideas
Please kindly improve the Safari browser side bar implementation further along with what The Browser Company has done with their Arc browser. Arc is about to retire soon too and they're willing to sell their SwiftUI code perhaps too for a decent pile of dollars, not the Jony Ive piles at least it should not. The toggle for side bar is nice and works perfect though!
Topic: Safari & Web SubTopic: General Tags:
1
0
379
3w
WebAuthn
The passkey authentication dialog appears, and after unlocking with Touch ID, the dialog closes without any notification of success or failure. This issue occurs with high frequency. access to the https://passkeys-demo.appspot.com/ register account and create passkey. logoff access to the url again you can see the passkey dialog unlock device then the dialog disappears nothing happens reload the page proceed 5) to 6) nothing happens or success webauthn.
2
0
628
4w