I'm not sure if I just missed a recent breaking change, but we are having an issue with the camera in our single page app on iOS 17.4.1 in Safari. We can open the camera and display it to the user using getUserMedia. However, if the path of the site changes at all (for example, the user clicks a button to opens a sidepanel which results in the path in the browser changing) the camera goes black, even if the video element is still being displayed. I can see in the browser that the camera has stopped, and the user has to re-enable it manually by tapping "Start Using Camera". Any idea's what could be going on here?

I am developing a web application that works on webview. From iOS 13, users could set a specific language for each individual app, and every webview-based application knew the application language through navigator.language. However, in iOS 17.4, this API returns the system language instead of the individual app's language in web applications. Is this an official change in iOS 17.4 or a bug?

Good evening, I am having problems with my WebRTC application when an iPhone or Macbook is connected. This only happens when an iPhone or Macbook is connected, as tests with Windows or Android devices have shown no issues. As can be seen in the screenshot below, it appears that the datachannel is not initialised correctly. In fact, the webcam and microphone do not work even if permissions are given by the user, and messages and the remote webcam are not sent/shown. If I open chrome console on Windows, this is the error I get in the console Could you please help me investigate this problem. If you want, you can have full access to my application at https://www.fourmeet.it. I attach the functions that seem to be responsible for the problems: const configuration = { iceServers: [...turnServers, { urls: 'stun:stun.1und1.de:3478'}], iceTransportPolicy: 'relay' }; peerConection = new RTCPeerConnection(configuration); dataChannel = peerConection.createDataChannel("chat"); peerConection.ondatachannel = (event) => { const dataChannel = event.channel; dataChannel.onopen = () => { console.log("peer connection is ready to receive data channel messages"); }; dataChannel.onmessage = (event) => { console.log("message came from data channel"); const message = JSON.parse(event.data); ui.appendMessage(message); }; }; peerConection.onicecandidate = (event) => { console.log("geeting ice candidates from stun server"); if (event.candidate) { // send our ice candidates to other peer wss.sendDataUsingWebRTCSignaling({ connectedUserSocketId: connectedUserDetails.socketId, type: constants.webRTCSignaling.ICE_CANDIDATE, candidate: event.candidate, }); } }; peerConection.onconnectionstatechange = (event) => { if (peerConection.connectionState === "connected") { console.log("succesfully connected with other peer"); } }; const stringifiedMessage = JSON.stringify(message); if (dataChannel && dataChannel.readyState === 'open') { dataChannel.send(stringifiedMessage); } else { console.log('canale non aperto'); } };

My Safari App Extension is having trouble with one website. This is typical for some other websites as well. Navigating to that website results in 6 “Load” events. For each such event I send a “safari.extension.dispatchMessage” to my objC code. For the first of these Load messages, my objC code sends a ‘sendMeIcons” message to “safari.self.addEventListener('message', function(event)”. The other 5 Load events are ignored by my objC code and do not send this message. safari.self.addEventListener('message', function(event) receives sendMeIcons JUST once. Yet, the event handler for this message) is invoked 4 times. The first invocation is correct. The other 3 are spurious. I have no idea why this is happening. Here is my objC code safari.self.addEventListener('message', function(event) { if (event.name === "Load My URL") { console.log('In event listener Load My URL'); ... return; } if (event.name === "sendMeIcons") { ... if (hrefs.length <1) //THIS IS ALWAYS TRUE FOR THIS TEST CASE. { safari.extension.dispatchMessage("js Found No Icons"); return; } else { ... safari.extension.dispatchMessage("IconsReturned",{"urls": arrayOfUrls}); return; } } I don't have a clue how to proceed. Any suggestions.

We have a payment process in an app which involves loading up a Web page to allow a user to enter credit card details, and to complete a transaction. This web page may result in a 3D-Secure step up challenge. For PCI compliance purposes we launch this in a SFSafariViewController. This 3D secure process involves a collection of redirects, with a final one back to us known as the "Merchant Page". In here, we want to do one more redirect, using a custom URL scheme, to allow the app to recognise that the process has completed, and can safely dismiss the SFSafariViewController. In those cases where no "step up 3d challenge" occurs, the process works well, the final redirect occurs, and our app successfully dismisses the SFSafariViewController. However, in a step up challenge, the Merchant Page loads, but any attempt to do the final custom redirect does not execute. I believe this is a feature of Safari - What I think is going on is that enough time has passed since there was user interaction on the page, and the final redirect, which isn't a https or http link (it is a myapp:// link) simply gets ignored. We've tried a lot of things. One thing works: If we provide a button, and when it is tapped, it sets window.location.href = 'myapp://success?', this works. This is a clue to if it is cause by lack of user interaction. We've tried lots of things: Rather than a javascript redirect, we tried server side redirecting; we tried all of the HTTP 300 response codes. They were all ignored We tried the meta refresh (which we know is kinda deprecated). We tried window.location.href = , window.location.assign(), document.location.href, document.location.assig(), etc. We tried issuing an Ajax XMLHttpRequest, but this failed because it isn't https or http We even tried to suggest our non-standard URL was the source of a script, just to trigger it but it didn't work. We've tried calling in during body onload We've tried calling it using a timeout in case timing was relevant. My gut feeling here is this is a feature. I've used Safari Debugging, and it literally steps over the window.location.href assignment, and doesn't produce a warning or an error. We've added try/catch, and no exception was thrown. Again, it leads me to believe this is all by design (perhaps to prevent ad fraud or something?). I was kinda hoping that in the response, we'd be able to specify a CORS header that tells the browser that "it will be ok to use resources from myapp://", but haven't found the right one. We may end up having to simply produce a button with a message "Your transaction has completed, please press here to dismiss", but it is terrible UX that is unnecessary. I've seen a number of posts elsewhere suggesting that redirects without user interaction can be considered suspicious, and I've experience of this same problem on another browser. If anyone has cracked this one, I'd love to know how

I have a wind map web application developed using HTML canvas 2D. However, after iOS 16.X (I'm not sure of the exact version), the streamlines have changed and now appear as below. They no longer disappear as they did previously. This issue is not limited to a specific browser. Before: After:

I've been using Apple Script below for gathering every title &amp; url of opening tab from browser window. It's been works fine for a few years but it's failed recently (maybe in last two weeks). #!/usr/bin/env osascript -l JavaScript // url.js function run(arg) { arg = arg.toString() let browser = '' switch(arg) { case 'chrome': browser = 'Google Chrome' break; case 'edge': browser = "Microsoft Edge" break; default: browser = 'Google Chrome' break; } Application(browser).windows().forEach((window) =&gt; { console.log('\n\n') window.tabs().forEach((tab) =&gt; { const url = tab.url() const name = tab.name() console.log(`${name}\t${url}`) }) }) } It's been works like below (imagine that you open https://example.com on edge) $ url.js edge example.com https://example.com But I found it failed today. $ url.js edge execution error: Error: Error: Application isn't running. (-600) of course I'm make sure Edge browser up and running. Same error for Chrome. I keep my environments(os, browser etc) up-to-date but I don't know which updates affects here. Any thoughts or helps are welcome. Settings MacBook Pro M2 Sonoma 14.2.1 Edge 122 Chrome 122

Hello community, first post I hope to meet the guidelines. I am developing a web site that uses a library that involves audio playback. This playback is accompanied by an animated canva, and in the IOS17 version in safari, this does not work. The audio is muted and the canva does not animate. However, in ios16 safari it works perfectly. I have also tried in safari on MacOs and ipadOs and it works, which makes me see that the problem is with ios 17 safari. The library in question is this: https://github.com/foobar404/Wave.js/ I don't think the failure is in the library since it works as I said in all other platforms. Specifically the code is here: https://github.com/foobar404/wave.js/blob/main/src/index.ts and makes me think that some HTML element is being incompatible. It is necessary to emphasize that in ios17 it does not work, but it does not appear any error in console. I would love to get help or know if this is a bug to report it.

In Safari 17's private mode, an inconsistent behaviour has been observed where GET query parameters are stripped from window.location after following user's click on any link with GET query parameters. The issue is reproducible for any link with GET query parameters. This issue varies; in some cases, the parameters remain visible in the URL, while in others, they are removed. (The window.location is always stripped of the query parameters). This behaviour impacts both iOS and MacOS users, suggesting a broader issue with Safari's treatment of URL parameters in private mode. The issue is not reproducible on both Safari < 17 and Safari 17 in Normal mode. Most probably it is the result of adding Advanced Tracking and Fingerprinting Protection in Safari 17. Can you please clarify logic behind Advanced Tracking and Fingerprinting Protection? Is it an expected behaviour?

i suspected that the updated IOS may block the Leaflet Library and bootstrap my website works on chrome, firefox but not the safari after it updates can anyone please advise?

Years ago, JSCore on non-macOS disabled JIT, leading to much worse performance than could possibly be achieved with JIT on. Has anything changed recently to permit greater optimizations for JSCore on mobile platforms? (iPadOS, visionOS). My guess is ”no” since the docs still llist only macOS under the MAP_JIT flag, but as far as I know, Apple could still choose to enable JSCore optimizations behind the scenes if this option were available to developers.

Hello, is it somehow possible to disable the FaceTime Reactions by getUserMedia constraints (for example) by JavaScript code? I need just to force to disable this feature by JavaScript for my web tool. I am happy about any solution (even if it is done by HTML property). Greetings

Hello, I am experiencing an issue when running a script on Safari, specifically WebKit. Here is a sample HTML code: <!DOCTYPE html> <html lang="en"> <head> <script> function delayedFocus(e) { e.preventDefault(); setTimeout(function() { e.target.focus(); }, 1000); // Adjust the delay time as needed (in milliseconds) } </script> </head> <body> <ul> <li> <input type="text" id="testtext" onmousedown="delayedFocus(event)"> </li> </ul> </body> </html> The logic behind this script is to introduce a 1-second delay when the user clicks on the textbox. After 1 second, the keyboard should appear. Testing on Android mobile devices shows the expected behavior. However, on iPhones, the textbox receives focus, but the keyboard does not appear. This issue has been observed on various iOS versions, with the script working only on iOS 15. If you have any insights or solutions to address this compatibility issue, it would be greatly appreciated. Thank you.

Hello, using getUserMedia() from https://webrtc.org/ camera starts zoomed in and then switches back to normal really fast, but it is visible for a while. Sometimes doesn't even happen. Issue is not present on iOS 16 and lower, only on 17+ (17.1, 17.2, 17.3). Can be reproduce at https://webrtc.github.io/samples/src/content/getusermedia/gum/ Thank you.

when i touch up on down the page get automatically scrolled here is one gif video to show what i mean : https://s13.gifyu.com/images/SCzSj.gif i am trying to find any css or javascript solution to stop this user experience is bad since user will push a button and page will move

Hello, I'm setting up a PWA with Next.js 13 and Firebase, and I need help with push notifications on iOS. Is there anyone experienced with this? I have notifications configured using the next-pwa service worker, and they work well on Android, but not on iOS. This is my worker/index.ts import { initializeApp } from 'firebase/app'; import { getMessaging, onMessage } from 'firebase/messaging'; import { onBackgroundMessage } from 'firebase/messaging/sw'; export const vapidKey = process.env.VAPID_API_KEY; export const FCM_TOKEN_COLLECTION = 'fcmTokens'; export const FCM_TOKEN_KEY = 'fcmToken' const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATA_BASE_URL, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, vapidKey: process.env.VAPID_API_KEY, }; const app = initializeApp(firebaseConfig); const messaging = getMessaging(app); onBackgroundMessage(messaging, (payload) => { console.log('[firebase-messaging-sw.js] Received background message ', payload); // Customize notification here if (payload.notification?.title) { const notificationTitle = payload.notification.title; const notificationOptions = { body: payload.notification?.body, icon: '/images/logo-app-4.0.svg', }; self.registration.showNotification(notificationTitle, notificationOptions); } }); onMessage(messaging, (payload) => { console.log('Message received. ', payload); }); and the next.config.js const runtimeCaching = require('next-pwa/cache'); const withPWA = require('next-pwa')({ dest: 'public', register: true, skipWaiting: true, dynamicStartUrl: true, dynamicStartUrlRedirect: '/login', runtimeCaching, disable: prod ? false : true, }); module.exports = withPWA({ reactStrictMode: true, swcMinify: false, experimental: { appDir: true, }, }); and the public/firebase-messaging-sw.js importScripts('https://www.gstatic.com/firebasejs/10.6.0/firebase-messaging.js'); if ('serviceWorker' in navigator) { navigator.serviceWorker.register('../firebase-messaging-sw.js') .then(function (registration) { alert('Registration successful, scope is: registration.scope'); }).catch(function (err) { alert('Service worker registration failed, error:'); }); } firebase.initializeApp({ messagingSenderId: '*************' }) const initMessaging = firebase.messaging() initMessaging.onBackgroundMessage(messaging, (payload) => { console.log('[firebase-messaging-sw.js] Received background message ', payload); // Customize notification here if (payload.notification?.title) { const notificationTitle = payload.notification.title; const notificationOptions = { body: payload.notification?.body, icon: '/images/logo-app-4.0.svg', }; self.registration.showNotification(notificationTitle, notificationOptions); } });

I am developing a safari extension When a redirect occurs on a web page, I want to detect the redirect and obtain all redirect URLs. If there is any way, please let me know Below is what I tried manifest version is 3 1, Use webNabvigation in background.js browser.webNavigation.onBeforeNavigate.addListener(function(details) { console.log("Redirected to:", details.url); }); This works, but I couldn't get the expected URL 2, Use webRequest in background.js This resulted in an error as it was not possible to listen to events in a non-persistent background. This is caused by using manifest version 3.

what happened? i never noticed it until i decided to use ipad air and pro as option in chrome dev console mobile view as well as ios simulator. it works ok in the ipad mini. touch events do not get triggered. instead, the scroll seems to overlap these. EDIT: Solved. please see comment below. While it works ok in ipad pro devices now, I still wish this could work out in chrome's dev console ipad pro view. the behavior is different with click events. instead of mouse down, it starts with mouse move. what gives? this only happens in ipad air and pro view in the device toolbar in dev console.

When javaScript calls to navigator.mediaDevices.getUserMedia using {video: true, audio: true } constraints, throws an error: error: OverconstrainedError constraint: "" message: "Invalid constraint" name: "OverconstrainedError" Same result when constraints has video: true and audio: false You can test it easily opening the webRTC github samples: https://webrtc.github.io/samples/src/content/devices/multi/ https://webrtc.github.io/samples/src/content/getusermedia/gum/ This works fine on IOS16

Add to apple calendar is not working react PWA app on iPhone I have developed react PWA app reactjs - v16.14.0 and testing in my iphone13. I have used **npm library ** which opens google,outlook, apple calender event properly on android device, on IOS google and outlook works fine but add to apple calendar event doesnt not show any popup or not showing any error. I have reported one issue on this library forum but they have mentioned that Apple blocks the dynamic generation of ics files I am looking for resolution for this. Let me know proper way to add event in apple calender considering javascript library. [Edited by Moderator]