When using iOS VoiceOver to navigate a webpage, selecting a element correctly activates the :focus-visible state. However, when VoiceOver moves to a non-button element (such as a or ), the previously focused button retains its :focus-visible state. The focus indicator only updates when VoiceOver moves to another .
This behavior can be confusing for screen reader users, as it creates the appearance of multiple elements being focused simultaneously. It also differs from expected keyboard navigation behavior, where focus styles typically update as soon as the user moves to a new interactive element.
Is this an intentional VoiceOver behavior, or could this be a bug? If intentional, is there a recommended workaround to ensure correct focus indication when moving between different types of elements?
Steps to Reproduce:
Enable VoiceOver on an iOS device.
Navigate using swipe gestures or explore-by-touch to focus on a .
Observe that the button correctly receives the :focus-visible styling.
Move to a non-button element (e.g., a with tabindex="0" or an ).
Notice that the button still retains its :focus-visible state, even though VoiceOver has moved to a new element.
Expected Behavior:
The previously focused should lose its :focus-visible state when VoiceOver moves to a different interactive element, just as it does when using keyboard navigation.
Actual Behavior:
The :focus-visible state remains on the previously focused button unless VoiceOver moves to another . This can create confusion by displaying multiple focus indicators at once.
Tested On:
iOS 17.7, 18.3.1
iOS Safari
iPhone 11 Pro, iPhone 14 Pro Max
Safari
RSS for tagSafari is the web browser developed by Apple and built into all Apple devices.
Posts under Safari tag
200 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
Hi all,
Chrome has it already - animation-timeline aka scroll-animations.
I can nowhere find any informations on what's the status in Safari/Webkit.
Seems like they do not have it on the agenda at all?
Does anyone know anything - I wanted to push a feature request for that - but also seem there is no feature request list anymore for webkit.
See: https://www.w3.org/TR/scroll-animations/
Cheers and kind regards!
My app is a Safari extension. When trying to validate the app, I get the following error:
App sandbox not enabled. The following executables must include the "com.apple.security.app-sandbox" entitlement with a Boolean value of true in the entitlements property list: [( "app.rango.Rango.pkg/Payload/Rango for Safari.app/Contents/MacOS/Rango for Safari" )] Refer to App Sandbox page at https://developer.apple.com/documentation/security/app_sandbox for more information on sandboxing your app.
I don't know why this is happening. I have app sandbox enabled in both the app and the extension target. I have both entitlement files. When executing codesign -d --entitlements :- /path/to/binary I get the following:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict><key>com.apple.security.app-sandbox</key><true/><key>com.apple.security.files.user-selected.read-only</key><true/><key>com.apple.security.get-task-allow</key><true/><key>com.apple.security.network.client</key><true/></dict></plist>
If I check on Activity Monitor, on the sandbox column it shows true. I have no idea why I keep getting this error when all indicates that the app is actually sandboxed.
As of IOS 18.3, there browser.tabs.create methods active property which is supposed to determine whether a tab get open in the active window or not is not working as it should. I have the active property set to false but the tab still gets opened and is active on the window. Tested on older ios versions 18.2 and below and it works as it should.
please advise
I want use the Safari Extension to decorate the window.fetch function, But No matter how I try, I can't get the fetch function to execute correctly. I was going through the documentation: https://developer.apple.com/documentation/safariservices/using-injected-style-sheets-and-scripts
and found this sentence:
"Injected scripts have an implied namespace — you don’t have to worry about your variable or function names conflicting with those of the website author, nor can a website author call functions in your extension. In other words, injected scripts and scripts that you include in the webpage run in isolated worlds, with no access to each other’s functions or data."
Does this mean I can't modify the window object in the content script just like a Chrome extension does with the webpage?
BTW, In chrome I use chrome.scripting.executeScript API, and in
plasmo I just use world: "MAIN" content script's config to achieved this feature.
We have a Web Extension that uses firebase for auth. It was working fine until the latest version of Safari 18.3 got released few days ago on January 27, 2025.
All of out extension versions stopped working on it; even the ones that are published on App Store. It uses FirebaseJS v9.23.0.
Same version of the extension are working fine on other browsers. We use onAuthStateChanged to listen to auth related events; but it is never fired now.
Hello,
I was going through the Apple Pay API documentation and noticed ambiguity on the exact process to complete merchant validation.
One of the documentation mentions that the validation url will be
Your server posts a request using mutual TLS (mTLS) by calling the Apple Pay server’s Payment Session endpoint.
Endpoint (Global)
POST https://apple-pay-gateway.apple.com/paymentservices/paymentSession
Endpoint (China region)
POST https://cn-apple-pay-gateway.apple.com/paymentservices/paymentSession
Referencing the url: https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/requesting_an_apple_pay_payment_session
whereas the other references that the value should be used as provided by the onvalidatemerchant event object with the property validationURL.
Refer: https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/providing_merchant_validation
Can someone confirm which is the correct approach to follow ?
I am using SFSafariViewController to process payments via a Stripe checkout URL. Once the payment is completed, the user is redirected to a success URL. I have also added associated domains for deep linking. Below is my implementation:
func presentCheckout(url: String) {
showProgressHUD()
let checkoutURL = URL(string: url)!
safariVC = SFSafariViewController(url: checkoutURL)
safariVC.delegate = self
self.present(safariVC, animated: true)
}
// Delegate method implementations
func safariViewControllerDidFinish(_ controller: SFSafariViewController) {
print("SafariViewController dismissed")
// Handle dismissal
}
func safariViewController(_ controller: SFSafariViewController, initialLoadDidRedirectTo URL: URL) {
print(URL.absoluteString)
if URL.absoluteString.contains("xsworld/payment/stripe/checkout/success") {
controller.dismiss(animated: true) {
if URL.absoluteString.contains("/v1/resources/xsworld/payment/stripe/checkout") {
NotificationCenter.default.post(
name: Notification.Name("StripePaymentStatus"),
object: nil,
userInfo: ["url": URL]
)
}
}
} else if URL.absoluteString.contains("xsworld/payment/stripe/checkout/cancel") {
// Handle failure
NotificationCenter.default.post(
name: Notification.Name("StripePaymentStatus"),
object: nil,
userInfo: ["url": URL]
)
}
}
func safariViewController(_ controller: SFSafariViewController, didCompleteInitialLoad didLoadSuccessfully: Bool) {
if didLoadSuccessfully {
print("Initial page loaded successfully")
} else {
print("Initial page load failed")
}
}
Issue:
The safariViewController(_:initialLoadDidRedirectTo:) method does not always get called after the payment is completed. Sometimes it works as expected, and sometimes it does not trigger at all.
What I’ve Tried:
Ensuring the associated domains for deep linking are correctly set up.
Checking the success and failure URLs.
Debugging to see if the redirect happens but is not detected.
What I Need Help With:
I want to ensure that the redirection always works after the payment process is completed, whether through deep linking or another reliable approach. How can I guarantee that my app correctly detects and handles the redirect every time?
Any guidance or best practices would be greatly appreciated.
I am currently operating an app using an embedded web server that communicates over local HTTP.
Recently, when opening Safari, I started encountering the following error message:
"Safari cannot open the page. Error: Failed to navigate to an HTTP URL with HTTPS-only mode enabled."
However, I am currently in a situation where switching to HTTPS is difficult. Are there any solutions to resolve this issue besides using HTTPS?
Thank you.🙏
Hi team, if I log into my app on Safari and try to enroll/challenge MFA security key option, I will be able to see this pop-up that gives me the option to pick either passkeys or external security keys
However, my team member who's using the same version of safari, can only see the external security key option
Why is this?
Title: Content Overlapping Address Bar After Clicking Links in Safari, tested on iPhone 11 (iOS 18.1.1)
Description:
When browsing in Safari on iPhone (iOS 18.1.1), the one-tab bar (address bar) collapses as expected when scrolling down a page. However, after clicking on a link and loading the next page, the content appears to overlap the collapsed address bar. This results in parts of the content being hidden or obscured by the address bar, which affects the user experience, especially on mobile devices with limited screen space. This issue is reproducible on Next.js applications and can be observed on websites such as rotterdam.nl and halderberge.nl.
Steps to Reproduce:
Enable the One-Tab Bar: Go to Settings > Safari and enable the one-tab bar feature.
Open the website rotterdam.nl or halderberge.nl in Safari on an iPhone 11 (iOS 18.1.1).
Scroll down the page so that the top address bar collapses.
Click on any link on the page to load a new one.
Once the new page loads, observe that the content appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured.
Expected Result:
The content should not overlap or be hidden behind the collapsed address bar after the page reloads. The layout should adjust properly without interference from the address bar, providing a smooth user experience.
Actual Result:
When the new page loads, the content overlaps or appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured.
Device(s) Affected:
iPhone 11 running iOS 18.1.1.
OS Version:
iOS 18.1.1
Technical Notes:
To address this issue, the following solutions have been attempted with no success:
Viewport Meta Tag:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
This was added to help ensure proper layout on mobile devices, but did not resolve the issue.
CSS Safe Area Insets:
body {
padding-top: env(safe-area-inset-top);
}
This CSS rule was applied to account for the safe area and prevent content from being hidden under the address bar, but it did not solve the overlapping issue.
Scroll Position Adjustment (for scroll-to-top button):
Adjusting the scroll behavior by changing the scroll position to {top: 1} instead of {top: 0} was a successful workaround to keep the address bar collapsed when clicking the "scroll to top" button. However, this did not resolve the issue when navigating between pages or changing routes, where the content still overlaps the collapsed address bar.
I am using videojs player to play my hls m3u8 proxies, and there was no issue with ipad os 16, ater i upgraded it to 18, i started getting this warning ->
[Warning] VIDEOJS: – "WARN:"
"Problem encountered with playlist 0-https://coludFront.m3u8. Trying again since it is the only playlist."
After this warning logs, the player just freeze's and even the source is not loaded into player.
This issue doesn't exist in mac safari and iphone safari with latest os.
For many years, I've noticed that although in native code I can handle continuous and simultaneous Apple pencil and touch inputs using UIKit, Safari and WKWebView's PointerEvents only seem to allow you to use one input type at a time. i.e. Apple Pencil down blocks touch input until lifted and touch input blocks Apple Pencil input. It's as though requiresexclusivetouchtype has been set in the underlying webkit implementation. There's decades of research (e.g. https://dl.acm.org/doi/10.1145/1866029.1866036 ) and several existing native applications in production showing that multimodal inputs open-up many unique and useful applications and interactions. Even a simple "hold object with finger" + "draw with stylus" controls are the norm. I recently built a native application using multimodal simultaneous inputs, but this is impossible to port to web due to the unexpected behavior of PointerEvents (and touch events, and mouse events; any variant exhibits the same behavior). I've researched and attempted to apply every possible flag, change, and css code to get this working, but I think the behind-the-scenes implementation is what's blocking the simultaneous touch types.
This is unexpected and undesired behavior because it's inconsistent with the native behavior. If it's unintended, it's a big priority to fix for creating better user experiences on the iPad. If it's intended, I do not believe that's reasonable (even if it might be more complex and used for more advanced applications). Please expose a way to support simultaneous touch types in iPadOS/iOS in both Safari and WKWebView.
At minimum, may we have a discussion on how to support the desired behavior? The simplest solution I can think of is to provide a webkit-platform-specific boolean in Safari and WKWebView called requiresExclusiveTouchType, which is set to False by default to keep the current behavior, and settable to True to get the more flexible behavior I'm expecting.
Hi folks,
When doing HLS v6 live streaming with fmp4 chunks we noticed that when the encoder timestamps slightly drift and a #EXT-X-DISCONTINUITY tag is created in either the audio or video playlist (in an ABR setup), the tag is not correctly handled by the player leading to a broken playback containing black screen or no audio (depending on which playlist the tag is printed in).
We noticed that this is often true when the number of tags is odd between the playlists (eg. the audio playlist contains 1 tag and the video contains 2 tags will result in a black screen with audio).
By using the same "broken" source but using Shaka player instead won't break the playback at all.
Are there any possible fix (or upcoming) for AV Player?
Use case: When users open any URL in iOS Safari and tap the share button, the share extension can automatically receive the PDF version of the webpage from Safari.
We've observed that the system Markup app and the Apple Books app can automatically receive a PDF file from Safari. However, our custom share extension only receives the webpage URL.
While iOS Safari provides an "Options" button to manually share a webpage as a PDF, this feature is not intuitive and requires user education.
Could someone help to identify the correct NSExtensionActivationRule (or any other solution) that would allow our share extension to directly receive the PDF snapshot from Safari without requiring additional user actions?
Hello I want to report an issue on macOS, I also reported this issue on feedbackassistant, but I didn't get a response from the feedbackassistant. I am sorry it might not be appropriate to post it here, if so, you can move or delete this post or ask me to to so. Thanks.
In short words, Chrome/Edge/Firefox users who manually set the browser as default browser in the macOS System setttings, will lose their default browser setting after browser a upgrade.
What steps will reproduce the problem?
(1) Install Chrome Canary, in my case I was using 134.0.6961.0. After installation, open it from launchpad, but don't set it as the default browser in the browser
(2) Go to macOS's system settings, search Deafult Web Browser, set the new installed Chrome Canary as default browser
(3) Go to Chrome Canary's Settings->About Chrome
(4) Wait for Chrome update information to be updated (it will auto update to the latest version)
(5) Check result of system default browser. Click a link from Notes, it will navigate to Safari.
What is the expected result?
System default browser should not change
What happens instead?
The System default browser changed to the topmost browser of the brower list in system settings. Click a link from Notes, it will be opened in Safari.
Notes
This bug also happens on Firefox and Edge, it should be a macOS bug.
This bug is similar to https://issues.chromium.org/issues/346505950
Looks like after installation, macOS recognize the newly installed version of browser as a new browser, even though the signature of the application remained the same.
In Local Network of macOS settings, some Edge users see multiple entries with the same name.
I'm trying to set up a smart app banner for my app, but it doesn't appear on the website when I try to test it.
I have the meta tag on my website:
<meta name="apple-itunes-app" content="app-id=6740216045" />
When I inspect the website, I can see that the meta tag is showing up in the head, but the banner is nowhere to be found. I tried clearing website data but still no dice.
We encountered an issue with universal links where the link failed to open the iOS application from Safari when triggered by an javascript outside a click event.
However, when we modified the code to open the link directly via a user click, the application launched as expected. Based on our testing, this issue seems to occur only when there is information for the application cached in Safari (i.e. IDP page cached, redirects to our app, javascript based universal link navigation fails).
Here is a code example of what caused the universal link failure:
const openUniversalLink = () => {
buttonClicked = True
}
useEffect(()=> {
if (buttonClicked) {
window.location.href = universal_link
}
}
<Button
onClick={openUniversalLink}
/>
Here is a code example of what caused our universal links to open successfully:
const openUniversalLink = () => {
window.location.href = universal_link
}
<Button
onClick={openUniversalLink}
/>
Are there defined practices of when we are able to open universal links triggered by javascript vs when they must be opened directly through user action?
Hi there,
I have a problem that , after I add website at dock but unable to turn on the website from dock & pop up message also mention that app was damaged. This problem appears after I factory reset my iMac. Please kindly advise. Thank guys.
I am a developer working on a Safari extension that handles video playback, and I’ve encountered an issue with Safari version 18.2. When I open the developer tools to inspect the browser, videos fail to play as expected. It worked well on safari version 18.1.
Details:
Safari Version: 18.2
Operating System: macOS Sequoia v15.2
Additional Information:
I’ve tested the extension with various video formats and sites.
Clearing the cache and disabling other extensions did not resolve the issue.
There are no error messages displayed in the console related to the extension.
If I close inspecting, then extension(video playback) works well.
I would appreciate any insights or suggestions on how to address this issue, as it impacts the functionality of my extension.
Thank you for your help!