We have a credit card registration page where each input fields are loaded in each individual iframes. Something like this: https://codesandbox.io/p/sandbox/autocomplete-and-iframes-qvy8dz Using pre-registered test credit cards Chrome: All fields are auto-filled Safari: Only credit card number field is auto-filled Is there a way to make Safari behave the same way with Chrome?

I have a web application built in NextJS that I use cookies to handle persisting authentication details. I clear the cookies on logout and this works in other browsers. However, when I run this on Safari, it seems the browser is caching the cookie information. When I use the Safari debugger, I do not see the cookies in the Storage view, however, when I use document.cookies, I can retrieve them fine - which should not happen. This is not the case in Chrome. I can't find any information on this online, so any help or insights would be greatly appreciated.

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?

Intercept WebView requests and add Auth token in all subsequent resource request [GET --> .js, .png, .css]. We have tried the below delegate methods and those call are not getting invoked. We have a challenge with Webview when load our application URL. func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) { func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { we are looking for some delegate or protocol to intercept the request to add the token for all the requests. is there any possible solution to fix this issue? Thanks

It was fine in 17.3, after upgrade to 17.4 beta the audio in Html just become silence. I've tried iPhone13 and iPhone XS got the same result.

I have implemented Web push notifications for a website built on NextJs 13 using Firebase and they are working perfectly on desktop Chrome, Safari, and Android Chrome. But on IOS after adding the website to the home screen, the user initially starts receiving notifications after 3-4 notifications even if the user does nothing and just leaves the PWA open, the user stops receiving notifications foreground and background. On further debugging, I found out that the FCM device token gets changed. I have no idea why it is changing automatically without doing anything It happens only for IOS. IOS version 17.3 and 16.7, Firebase version 10.7.1 Is this a bug? or if someone can guide me on this?

Hi, I need to intercept from a UIViewController the postMessage that originate from the web page that is rendered in the SFSafariViewController component, is it possible to do it? how would be the correct implementation? thanks!

Safari shows error "QuotaExceededError: The quota has been exceeded" May I ask what is the quota limit for Safari session storage / local storage? macOS 13.4.1 Safari 17.1 Thanks

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

I have a table with a filter. The table only displays the table rows that matches the filter. In the javascript code, I have a filterInteraction() function that have a commonElements list and display the table rows if they are included in the commonElements list. In my html, when the user click, the filterInteraction() will be triggered. Here's part of my filterInteraction() function (the sensitive code is removed): " function filterInteraction(){ let searchList = searchResult(); let checkboxList = checkboxResult(); let commonElements = searchList.filter(element => checkboxList.includes(element)); console.log("commonElements ==========", commonElements) var table, tr, i; table = document.getElementById("employeeTable"); let rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); for (i = 0; i < rows.length; i++) { let currentName = rows[i].getElementsByTagName("td")[0].textContent.trim(); if(commonElements.includes(currentName)){ rows[i].style.visibility = "visible"; // rows[i].removeAttribute("hidden"); // rows[i].style.display = ""; } else{ rows[i].style.visibility = "hidden"; // rows[i].setAttribute("hidden", true); // rows[i].style.display = "none"; } } countPart(commonElements.length); }". In this function, I printed the commonElements list, and the list is always correct. However, for the display, it's switching between displaying nothing and displaying the correct rows. (When entering the Safari, the first click on the filter makes the table empty, but the second click displays the correct rows, the next click will make the table displays nothing again .... ). Even during the time that the table display nothing, the commonElements list printed in console is still correct, which means the function does have the correct table rows, but they are not displayed. I tried three different ways to display the table row: "rows[i].style.visibility = "visible"; rows[i].removeAttribute("hidden"); rows[i].style.display = "";". None of them could work without the bug I mentioned above. I tested my filter on Chrome, FireFox, and IE, and my filter works perfectly on them. Any possible way to solve the issue on Safari? Why it has the display bug like this in Safari? Really need help!!! Thanks

Hi All, I am having some issues with my website font on safari. It is showing the correct font, but it appears too bold. If I zoom into the site the font then appears correct but at full screen it is showing very bold. Any ideas what the issue could be? Kindest Liam

I'm developing a website. When I write font-family: system-ui,PingFang SC in css, I understand that there is no risk of infringement. Can you confirm it for me? At the same time, what I'm not sure about is if I take screenshots on my website, are there any risks in terms of copyright infringement? Looking forward to your reply

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]

Post iOS 17 version update on Dec 12, we are facing a weird issue. When accessing https://infinitiusa.com/ website from Chrome browser/FaceBook App, there is an dummy overlay with a 0 sec video player (Overlaying full screen as blank). On closing the video player we can see the website is loaded fine. We cross checked few other websites and found the websites using Modernizr (https://cdnjs.com/libraries/modernizr) is having the issue post iOS update. Is any issue similar issue reported ?

I learned that I can't have a file inside the bundle if I want it to be able to be changed while the app is running. If I have a file stored outside, how could I let an HTML website access that JS file? I'm using WKWebView to run a local website. The JS would need to be accessible by the website before it loads, because it is a configuration file that is needed on load.

My Chrome extension runs fine on Chrome, but when I use the following command to run it on Safari, I find that the result returned by chrome.runtime.sendMessage is always Undefined. xcrun safari-web-extension-converter --app-name MySafariTest dist The following is my code content.js: async test() { return chrome.runtime.sendMessage({ method: "test" }) } let result = await this.test() // result is always undefined background.js: chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { sendResponse("test123") }); I want to know if there is any way to make the content script and background script of Chrome communicate normally in Safari?

In my app mobile web app, it is common for users to select lots of photos at once. One of the issues is that by default, it seems that iOS converts the photos selected before returning them, and doesn't have a good UX for indicating what it is doing. It just looks like nothing happens after you tap 'Add'. The more photos selected, the longer it takes as it is converting them in the background without an indication of what is happening. My app can handle unconverted, HEIC format, photos. So it is ideal if the photo picker from Safari just returns the images in their original format. In iOS 17, there is an 'Options' button in the picker that provides a 'FORMAT' selection which defaults to 'Automatic'. The other 2 options are 'Current' and 'Most Compatible'. The subtext indicates that 'Automatic' will use the 'best format for the destination'. Given that, is there a way for me to indicate to the photo picker from safari that 'Current' is the best format for my destination? I tried setting the 'accept' attribute on my file input field to be 'image/*' which I thought made the most sense. But it still seems to default to converting all the images. It is a pain to have to educate users to manually go and adjust the format option to be 'Current'. It would be great if I could indicate in my html file input field that I want the picker to return non converted files. I can't find a way to do this, or really any documentation about this for that matter. If anyone knows where documentation is, or how to do it, I would appreciate the help greatly :). Thank you! Josh

Static resources on my website do not use the cache-control header. (without cache-control header) Recently, we have been receiving a lot of issues from iOS 17 users that seem to be related to cache. Has the default cache-control header changed in Safari on iOS 17?

I am developing a web application that uses the camera and microphone. As part of this, I need to ask for camera and microphone permissions and also handle changes in these permissions. However, a few issues were discovered in Chrome on iPhone and iPad. The issue I encountered is that, after attaching an onchange event listener to the status obtained from navigator.permissions.query({name: "microphone"}), there was no detected change in permission state even after camera and microphone permissions were granted. However, when I directly executed navigator.permissions.query({name: "microphone"}) in the Safari JavaScript console, it showed a different state value compared to the status object I created. The status object continuously displayed "prompt", while the direct console query showed "granted". I suspect that the status object is not being updated in real-time with the browser, or there might be a bug since the onchange event was added quite recently (around September 2022, as far as I know). Is anyone experiencing similar issues, or does anyone know how to resolve this problem? Below is a list of the devices I have tested with. iPhone: iPhone 13 iOS 16.7.2 (maybe safari version is same) agent AppleWebKit 605.1.15 criOS 119.0.6045.169 Mobile 15E148 Safari 604.1 chrome version 119.0.6045.169(official build) iPad: iPad Air 4th iOS 17.1.1 (maybe safari version is same) agent AppleWebKit 605.1.15 criOS 119.0.6045.169 Mobile 15E148 Safari 604.1 chrome version 119.0.6045.169(official build)