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 />}
</>```
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
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
I'm creating an iPad app using Xcode 26 Beta 6. I have the following simple code and web page, but when I tap the file selection button, nothing appears. Do I need to add any additional code?
code
struct SwiftUIWebView: View {
@State private var webPage = WebPage()
private let url = URL(string: "https://www.xxxx.com/")!
var body: some View {
WebView(webPage)
.onAppear {
webPage.load(URLRequest(url: url))
}
}
}
web page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</style>
</head>
<body>
<div id="container">
<input type="file" />
</div>
</body>
</html>
We have a Smart App Banner (including App Clip) on our website and have noticed today that the banner's background color has changed. It no longer has the default white background and blue button color, instead it has a background color that matches our page's background, and even the color of the button has changed.
What's interesting is that we have not triggered this change at all. The colors seemingly changed by themselves.
Looking at the Apple Documentation, no customization options are mentioned. Searching the web, the theme-color meta tag is mentioned in relation to this, however we haven't even included that tag on our page.
What is triggering this color change then and how can we influence it?
Topic:
Safari & Web
SubTopic:
General
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?
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
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!
Hello there,
For a video like this <video src="blob:safari-web-extension://***" autoplay="" loop="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; z-index: -1;"></video>, no matter if its local or remote, blob or mp4 files, is constantly being reloaded (refetched? revalidated?) if the loop tag is added. I can confirm there is actual constant traffic from the server based on my server logs. I am running iOS/macOS 26.
Hello,
We are developing a Safari Web Extension that uses a cookie-based authentication mechanism. The extension makes a request to an endpoint e.g. /login, and this endpoint expects a cookie (e.g., sessionId) to be included with the request. Everything works correctly when running in the default Safari profile.
However, when I install and run the same extension in a new, non-default profile, the behaviour changes:
The request to /login is still made
The cookie sent is not as expected
As a result, the response returns null user data
I confirmed that logging into the site in the new profile (in a tab) works, but the extension does not appear to share the session/cookie state with the login tab
We’ve tried explicitly setting "credentials": "include" in the request but that still didn’t share the cookie in the extension context in the non-default profile.
My questions:
Is there away to allow cookie-based session sharing between a tab and an extension in non-default profiles in safari?
Would switching to a token-based auth mechanism (e.g., Bearer tokens ) be the recommended workaround?
I’d appreciate any insights or guidance from those who’ve run into similar issues.
Thanks in advance!
Topic:
Safari & Web
SubTopic:
General
Hi, I would like to share a finding and ask for a solution, if possible. This may be a potential bug with PointerMoveEvent on Safari on an iPad with Pencil Pro.
I tested onPointerMove and onTouchMove in a <canvas> element in a React web app for freehand drawing using
Mouse on a PC.
Finger touch on iPad
Apple pencil pro on iPad
Finger touch on iPhone
I was able to draw smooth curves in all cases except when using onPointerMove with Apple pencil pro on iPad. The curve drawn in this case looked like it was created using several straight-line segments.
It seems like the sampling rate for PointerMoveEvent is lower than that of TouchMoveEvent on Safari
I am not sure how to solve this problem or if it is an issue with Safari's interpretation of PointerEvents. Any input is greatly appreciated.
Edit: It seems like https://developer.apple.com/forums/thread/689375
is related.
現在新しいWebViewを使ってwebページを読み込むiPadプログラムを作成中ですが、読み込んだ後に部分のボタンをタップしても何も起こりません。safariで通常通りページを開いてボタンをタップするときちんと写真ライブラリ・カメラで撮るなどのポップアップが表示されます。下記がコードです。Webページは単純化のためにのみを配置しています。
struct SwiftUIWebView: View {
@State private var webPage = WebPage()
private let url = URL(string: "https://www.****.com/")!
var body: some View {
WebView(webPage)
.onAppear {
// URLを読み込む
webPage.load(URLRequest(url: url))
}
}
}
何か追加のコードが必要なのでしょうか？
Hi,
I’m trying to detect whether my Safari Web Extension is running in Safari or Safari Technology Preview. Is there a reliable way to do that?
I can get the executable path of the parent process using proc_pidpath(). However, unlike Chrome or Firefox, Safari extensions run under /sbin/launchd as the parent process, not the responsible process (browser’s binary). In this scenario, I need the executable path of the actual browser process, but I haven’t found a way to get it.
Also, Safari doesn’t implement the Web Extension API’s browser.runtime.getBrowserInfo(), unlike Firefox.
I haven’t tested it yet, but I’m considering checking the user agent string, though I’m not sure how reliable that would be.
Use Case
Some users use my Safari extension as a web development tool and want to enable some features exclusively in Safari Technology Preview, while using other features only in standard Safari. If I could detect which browser is in use, I could provide the appropriate functionality for them.
We attempted to perform automated testing (using Python) on an 11th generation iPad (iPad A16) using Selenium 4.38.0, but we were unable to capture webpage screenshots using the function "driver.save_screenshot(filename)". However, this issue did not occur on an iPad Air 4. During our debugging of the "WebDriver.py" script, we found that after issuing the screenshot command, a status value of 500 was returned, accompanied by an "unknown error".
We have communicated with the Selenium team and provided the main Python code(https://github.com/SeleniumHQ/selenium/issues/16555). They suggested that the problem likely lies within the SafariWebDriver, rather than in the "remote_webdriver.py" file.
Additionally, we tried using the SafariWebDriver provided by Safari Technology Preview, but the problem persisted.
YouTube now requires a Referer to be sent to be able to embed Youtube videos, otherwise the videos won't work. But WKWebView doesn't send a Referer when using a custom scheme, so Youtube videos stopped working in that case.
This affects Ionic apps, both using Cordova or Capacitor. There's an open issue for Cordova and another one for Capacitor. In these apps, the app is served using a custom scheme like capacitor://localhost or ionic://localhost.
I tried modifying the Ionic WebView source code to force adding a referrer to the URL loaded using WKWebView's loadRequest:
[request addValue:@"https://my.test.app" forHTTPHeaderField:@"Referer"];
[_engineWebView loadRequest:request]
But the Referer is still not sent in the Requests, I guess because the app is using a custom scheme (e.g. capacitor://localhost). However, if I modify this code to force loading an "online URL" (using https) instead of capacitor://localhost, then the my.test.app Referer is sent to the requests.
Is there any way to make WKWebView send a Referer when using a custom scheme?
As the title suggests, given today’s overpowered device performance, shouldn’t Safari and WKWebView allow repainting during window resizing? Currently, all WKWebView-based apps pause page rendering during resize. When a user double-clicks the drag region, the sequence goes: pause rendering → enlarge or shrink the window → leave a blank area → repaint the page. The whole process feels inelegant—especially on devices that support ProMotion.
Hello,
I’m working on a cross-origin WebAuthn implementation where a parent page embeds an iframe from a different origin to perform authentication. According to the WebAuthn Level 3 spec (Section 7.1.1), when crossOrigin is true, the clientDataJSON may include topOrigin—but Safari does not seem to populate this field.
Observed Behavior:
Chrome/Firefox: Include topOrigin in clientDataJSON when crossOrigin: true.
Safari (macOS/iOS): Omits topOrigin even though crossOrigin is correctly set to true.
Example clientDataJSON from Safari:
{
"type": "webauthn.get",
"challenge": "...",
"origin": "https://iframe-origin.example.com",
"crossOrigin": true
// Missing `topOrigin` (expected: parent origin)
}
Questions:
Is this an intentional omission in Safari for privacy/security reasons?
Are there specific requirements (e.g., HTTP headers, permissions policies) needed for Safari to expose topOrigin?
Is there a known workaround to reliably obtain the top-level origin in cross-origin WebAuthn flows?
System Info:
Version 18.4 (20621.1.15.11.10)
OS: Sequoia Version 18.4 (20621.1.15.11.10)
Reproduction Steps:
Parent page (https://parent.example.com) embeds an iframe (https://webauthn-rp.example.com).
The iframe calls navigator.credentials.get() with a WebAuthn challenge.
Safari returns clientDataJSON with crossOrigin: true but no topOrigin.
Code Snippet (iframe):
const credential = await navigator.credentials.get({
publicKey: {
challenge: new Uint8Array(/* ... */),
rpId: 'webauthn-rp.example.com',
allowCredentials: [],
hints: [],
userVerification: "preferred",
}
});
console.log(JSON.parse(atob(credential.response.clientDataJSON)));
Has anyone encountered this? Any insights would be greatly appreciated!
Topic:
Safari & Web
SubTopic:
General
Hi everyone,
I want users not to see the system context menu when long-pressing text on a page in Safari on iOS. I found on MDN that the CSS property -webkit-touch-callout: none; can achieve this. But in reality, it doesn't really work.
MDN documents URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-touch-callout
Here’s a minimal example:
function preventIOSSafariContextMenu() {
if (document.getElementById(STYLE_ELEMENT_ID)) return;
if (!IS_TOUCH_DEVICE) return;
const style = document.createElement("style");
style.id = STYLE_ELEMENT_ID;
style.textContent = `
html, body {
-webkit-touch-callout: none !important;
}
`;
(document.head || document.documentElement).appendChild(style);
}
The context menu persists.
Has anyone else encountered this? Is this an intentional change in WebKit, or could it be a regression? If it’s intentional, is there a recommended alternative?
Thanks in advance for any insights!
When our Safari Web Extension makes a api request from its background script (registered via "scripts" in manifest.json, e.g., "background": { "scripts": ["js/background.bundle.js"] }) to our authenticated API endpoint (https://api-domain/user), the Cookie header is not included in the request. This occurs only when the extension is running within a non-default Safari User Profile. This causes our API to treat the user as unauthenticated. The exact same extension code, manifest, and API call work correctly (Cookie header is present and user is authenticated) when the extension is running in the Default Safari User Profile.
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
I have a business scenario where I want to guide users to Safari and open a Safari extension. How can I open Safari from my app and navigate to a specific webpage?
Topic:
Safari & Web
SubTopic:
General