On Safari Mobile and iOS version 16 or 17, while scrolling the webpage, the function browser.tabs.captureVisibleTab() is not returning the expected screen image. The image is cropped from the top. The probable reason for the same is the collapsible Address Bar. The below attached image is the iPad mini (6th generation ) Simulator OS Version:17.0 simulator The below attached image is created by browser.tabs.captureVisibleTab() I tested it on iPad mini (6th generation ) Simulator OS Version:17.0 and iPad (8th generation) - iPadOS Version 16.2.

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.

I was wondering if anyone else ran into a similar problem. We have an universal link that leads to out iOS application. If we use the link by itself everything works properly. On to the problem. We run some campaigns that utilise universal links to redirect users to the application directly from the email. The emails are using click tracking, which means that they put the universal link behind another link. So it goes like this: User clicks link in the email User gets redirected to click tracking link User is redirected to the universal link Expected: App opens; Actual: User gets too many redirects error. The weird thing about this issue is that if, after clicking on the link from email app, user chooses to open link in Safari, they get too many redirects. But if they choose Open In Default Browser (which is also safari btw) then it works and opens the app. Any help here will be much appreciated since we tried everything we can think of and this problem still persists.

Hey! We are developing a Safari Web Extension which requires the background script for localhost Web Socket communication (it doesn't work if we try to connect from the injected content script), everything works fine but we need it to be accessible from any URL since we have a SDK that is distributed to the customers and the domain name depends on each of them, is there a way to do this? Or is there any workaround to not have to use browser.runtime.connect or browser.runtime.sendMessage for communication between the injected content script and the background script? We have tried to use <all_urls> but that's not allowed for externally_connectable. Thanks!

Hi, i wanna access haptic on macbook via web application running in safari. It there any API for this? I.e. like vibrate API for other browsers?

I made WebView with React. cursor in the webview's textfield is in the wrong position. What should I do?

Steps to Reproduce: Open Safari browser on an iOS device. Navigate to a webpage requiring OTP input for authentication. Request OTP and wait for the SMS containing the code. When the SMS is received, Safari browser attempts to read the OTP automatically. The suggested OTP is displayed, and upon selecting it, the browser navigates to the previous screen or page. The navigation triggers the current screen button, preventing the entered OTP from being applied. IOS version: 17.0.3 Expected Behavior: After selecting the suggested OTP, Safari should not automatically navigate to the previous screen/page, and the entered OTP should be successfully applied to the authentication process. Actual Behavior: Safari browser on iOS automatically navigates to the previous screen/page after selecting the suggested OTP, preventing successful entry of the OTP.

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.

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

We have an app that is distributed in our .pkg installer (using pkgbuild and productbuild). Now we need to perform various system checks, eg. minimum macOS version and then continue or abort the installation, based on conditions. When we do that in the pre-install script, it works but the user experience is not what we need. The installation aborts with a generic message. What we want is to show the progress, eg. which checks have failed and why, a link to open the installation log, and to gracefully exit the installation. Is it possible to achieve all this without resorting to writing a custom installation mac app ?

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

Hi, I have a mobile app that uses iframe to show the html content. I noticed that the link cant be opened on the IOS but its works well on android. Here's general example html code: <iframe id="view-html-viewer-iframe" src="about:blank" frameborder="0"> ... <p><a href="https://google.com/" target="_parent">Google</a></p> ... </iframe> Anyone encounter the same issue.? is there any solution for this.? 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.

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

Hi, We provide a Safari App Extension to our customers. It follows the standard Safari Extension App layout - the Extension is inside the App, the App takes care of installing the Extension in Safari. The Extension requires the Input Monitoring and Screen Recording permissions to be granted from the user. At some point during its execution, the Extension runs the code that triggers the TCC permission prompt. When the user goes to Security & Privacy Preferences dialog and clicks on the checkbox next to the Extension entry to grant the permission, the checkbox remains unchecked, however, the permissions are actually granted. This is the issue, and it is confusing for the user. Moreover, if the user decides not to grant the permissions (closes the initial prompt by clicking on the 'Deny' button) s/he will be prompted again when the Extension runs the next time (and every time). The App that contains the Extension does not suffer the same problem. Its entry in Security & Privacy Preferences responds correctly to checking/unchecking the checkbox. Unfortunately, the permissions granted to the app do not apply to the Extension contained within. Querying the main TCC database (/Library/Application Support/com.apple.TCC/TCC.db) shows one kTCCServiceListenEvent entry for the app, identified by its BundleID (permissions granted). For the Extension there are two entries - one identified by the the BundleID (permissions granted) and the other identified by the path to the Extension (permissions not granted). kTCCServiceListenEvent|/Volumes/Common/Sandboxes/Monterey/AppExtPermissons/DerivedData/AppExtPermissons/Build/Products/Debug/AppExtPermissons.app/Contents/PlugIns/AppExtPermissons Extension.appex|1|0 kTCCServiceListenEvent|com.gemalto.AppExtPermissons|0|2 kTCCServiceListenEvent|com.gemalto.AppExtPermissons.Extension|0|2 The system logs show some tccd-related errors when trying to check the checkbox: Console logs when trying to grant permissions We suspect this might be the reason why the checkbox next to the Extension entry under Input Monitoring in Security & Privacy does not respond to clicks. The same problem applies to granting Screen Recording permissions to the Extension. I constructed a minimal example based on the default Safari App Extension project - basically only added code that would trigger the permission granting prompt in the App and the Extension. Can provide a link to a zip if deemed useful. Are we doing something wrong, maybe missing an ID or a plist string somewhere?

Hi, we have a services worker configured in a web page to work offline. The page is loaded in the WKWebView component and we observe that the services worker is not registering correctly, is this component compatible with the API of the services worker? If so, how would be the correct implementation, if it is not compatible, what alternatives are there? thanks!

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!

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.

I have implemented a custom view that shows a page in WKWebKit: import SwiftUI import WebKit struct WebView: UIViewRepresentable { let urlString: String func makeUIView(context: Context) -> WKWebView { let webView = WKWebView() webView.navigationDelegate = context.coordinator return webView } func updateUIView(_ uiView: WKWebView, context: Context) { if let url = URL(string: urlString) { let request = URLRequest(url: url) uiView.load(request) } } func makeCoordinator() -> Coordinator { Coordinator(self) } class Coordinator: NSObject, WKNavigationDelegate { var parent: WebView init(_ parent: WebView) { self.parent = parent } } } It works, but it shows a grey button in the upper left with no icon. If I click on that button, nothing happens. But I can see this error message in the Xcode logs: Trying to convert coordinates between views that are in different UIWindows, which isn't supported. Use convertPoint:fromCoordinateSpace: instead. What is this button, and how can I get rid of it? As a second question: I also tried to spawn Safari in a separate window, using this view: import SafariServices import SwiftUI struct SafariView: UIViewControllerRepresentable { let url: URL func makeUIViewController(context: Context) -> SFSafariViewController { return SFSafariViewController(url: url) } func updateUIViewController(_ uiViewController: SFSafariViewController, context: Context) { // No update logic needed for a simple web view } } This works, but Safari shows up behind the view that is including the Safari view. Instead, I would want Safari to show up in front - or even better: next to my main view (either left or right). Is there a way to do this?

First: don’t tell me about webkit-reporting. I just get a 502 from there! Ok, what’s the problem? I made an example telling it all: <html> <head> <style> .ext { display: none; color: cyan; } body { max-inline-size: calc(100vi - 12px); &:not(:has(:target)), &:has(p.dft:target) { #ext { display: none; } #dft { display: block; } } &:has(p.ext:target) { #ext { display: block; } #dft { display: none; } } &.ext li { display: none; } &:has(.ext:target) { & li.ext { display: revert; } } } header > p > a::before { color: orange; content: "click me >>> "; } ul { display: flex; } li { margin: 1ex; list-style-type: none; inline-size: max-content; } .yes li::before { font-size: 70%; color: yellow; background-color: blue; content: "(" counters(total, ":") ")"; } ul.nGrp { display: inline flex; counter-reset: nameIndex; & li::after { display: inline-block; counter-increment: nameIndex; font-size: 75%; color: red; vertical-align: sub; content: "(" counter(nameIndex) ")"; } } header { inline-size: 100%; font-size: 2rem; text-align: center; } article { counter-reset: total; padding: 1ex; margin: 1em; &::after { font-size: 3em; color: purple; content: "— [" counter(total) "] —"; } li { counter-increment: total; } outline: 1ex groove purple; } </style> <title>Strange Safari-Count</title> </head> <body lang="de"> <header> <hgroup><h1>Strange counting without <code>:before</code></h1><p>different from FireFox!</p></hgroup> <p id="dft" class="dft"><a href="#ext">More?</a></p> <p id="ext" class="ext"><a href="#dft">Less!</a></p> <p><code>:before</code> doesn’t inherit parent’s display:none? (same in FireFox)</p> </header> <article> <ul> <li class="dft"><p>A1</p></li> <li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li> <li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li> <li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul> </li> <li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li> </ul> <ul> <li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li> <li class="dft"><p>B2</p></li> <li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li> </ul> </article> <article class="yes"> <ul> <li class="dft"><p>A1</p></li> <li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li> <li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li> <li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul> </li> <li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li> </ul> <ul> <li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li> <li class="dft"><p>B2</p></li> <li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li> </ul> </article> </body> </html> At least have an eye on the total count at the end of the (identical) articles! Before and after clicking the teaser.