Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Created

Safari Is Unusable
I have had zero luck anywhere else and it’s at this point infuriating. February 23rd of this year I submitted a ticket in Feedback regarding how Safari for me has been broken. I can’t load any website at all, I have cleared cache, data, you name it. I have reset the phone after doing so and as I type this today on a brand new iPhone 17 Pro Max it still doesn’t work. Every single app that prompts a Safari window to sign in also doesn’t work and crashes just as Safari the app does. Sometimes I get a message that pops up that says “Webkit encountered an internal error” before it crashes. I can’t provide a screen recording or screen shots because Safari just crashes. I genuinely don’t know what to do or where to go for an answer and i’ve submitted seven updates to my open Feedback ticket since February 23rd 2025, spanning months from that original date and yet no change or help has came from it. I am clueless on how to even begin to go about fixing it and agitated because it’s been so long, so many other apps effected by this, even on a brand new device Safari still does not work for me. Any help at all would be greatly appreciated I used to have a 15 Pro Max but now on the 17 Pro Max and throughout the entire time i’ve been on the developer beta. Maybe that is the issue i’m unsure because now i’m just on iOS 26 so I don’t know if it’s just stuck like this forever. Again any help would be appreciated. I have not went physically to Apple yet to get this solved it‘s been a last resort, considering my options I might have to clear time to go. I’ve been using Chrome ever since this issue.
1
0
245
1d
Manage Safari 26 top bar transparency (Mac)
Hello from Leipzig, Germany! I noticed that when vertically scrolling in Safari 26 on my Mac, the content of the website I am currently working on is visible in the tab and URL bar with a liquid glass effect. I then looked at various other websites. Some websites have an opaque top bar. Some websites have a transparent top bar where content is visible when scrolling. On the Apple website, the top bar is opaque in light mode but transparent in dark mode. Unfortunately, I can't find a way to control this behavior. Has anyone found out more about this?
0
0
109
2d
I want to specify the background color for the header notch and footer indicator area when opening the browser in Safari on iOS 26.
When I open the browser in Safari on iOS 26, I want to specify the background color for the header notch (where the time, battery, etc. are displayed) and the footer indicator area. Specifying the theme color in HTML as shown below did not change anything. <meta name="theme-color" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#ff0000"> The HTML below specifies the background color as green, but is it necessary to specify the background color directly in the body like this? Or is there some kind of metadata, like theme color? <!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="theme-color" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ff0000"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#ff0000"> <title>サンプル</title> </head> <body style="background:#00ff00"> <main> <p>テキスト</p> </main> <div id="overlay" role="dialog" aria-modal="true" data-test-id="health-warning-modal" style=" color:#000000; position:fixed; inset:0; z-index:30000; background:#2563eb; display:grid; /* 初期表示:表示中 */ align-items:center; justify-content:center; overflow-y:auto; " > <div style=" padding:60px 16px; display:flex; flex-direction:column; gap:20px; width:100%; box-sizing:border-box; " > <p style=" font-weight:700; text-align:center; margin-top:20px; font-size:28px; line-height:1.4; " > オーバーレイ </p> </div> </div> </body> </html>
1
0
120
2d
Safari: Sticky element with bottom: 0 does not follow viewport when toolbar hides on scroll
Device: iPhone 15pro, ios26.0 (23A 341) IOS version: 26.0 (23A 341) When using position: sticky; bottom: 0, the div is expected to stick to the bottom of the viewport when the browser toolbar hides while scrolling. However, it stops at the height where the toolbar was, instead of moving down with the disappearing toolbar. In the image below, the red-bordered navigation shows the situation where it does not stick to the bottom. i
0
0
39
3d
MacOS Tahoe - Traffic is not routed through PAC file
I am using a custom PAC file in network settings and till now with Sonoma & Sequoia OS, it was working perfectly fine and I was able to redirect traffic to my proxy server. After upgrading to MacOS Tahoe, this stopped working completely. What is happening now is no url is opening on my machine with Chrome & Firefox browser, but somehoe Safari is working. After checking, I found that my deployed network extension is intercepting traffic and allowing it to pass. But still, the pac file is not working. Are there any changes done in MacOS Tahoe regarding this PAC file? How can I resolve this issue?
0
0
66
4d
iOS 26 Safari will not render position: fixed content below the browser controls
Bug Report: Safari refuses to render content that is position: fixed or position: sticky if it goes below the iOS 26 navigation controls at the bottom of the browser. Since the controls are transparent and floating, this is a problem as fixed content is effectively unable to reach the bottom of the page. Attempting to move it below 100vh causes it to be cut off rather than rendering behind the navigation elements. Here is some code reproducing the issue: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html, body { margin: 0; padding: 0; background-color: #363636; } #just-a-bird { position: fixed; bottom: -100px; width: 300px; height: auto; background: red; } </style> </head> <body> <img id="just-a-bird" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Cattle_tyrant_%28Machetornis_rixosa%29_on_Capybara.jpg/640px-Cattle_tyrant_%28Machetornis_rixosa%29_on_Capybara.jpg"> </body> </html>
2
6
392
4d
Text rendering problem using OpenType font and cursive lookups with mixed RIGHT_TO_LEFT flag
Hi, I am developing an OpenType font with the following cursive feature. feature curs { lookup cursivejoinrtl; # RIGHT_TO_LEFT flag set between Hah, Meem, Yeh and final Meem lookup rehwawcursive; # RIGHT_TO_LEFT flag clear between Waw and Hah } curs; Here is the rendering of the word وحميم in TextEdit. Using HarfBuzz I got the following result. The same rendering problem occurs when using Safari. It seems that is related to Core Text. I reported the issue to Feedback Assistant over a year ago but haven't had a response yet. So I'm posting the problem on this forum. Any support on this matter would be greatly appreciated.
0
0
110
5d
Can't turn off inline auto predictions in WKWebView on Mac
I have a WKWebView that contains a js text editor, built on top of a content editable div. Currently, inline predictions on Mac break the text editors functionality significantly every time there's a prediction. There's not a way for me to fix this on the js side unless I can know when a prediction is shown. I've tried disabling inline predictions and writing tools with the web view config, but it doesn't work: let config = WKWebViewConfiguration() config.writingToolsBehavior = .none config.allowsInlinePredictions = false let webView = WKWebView(frame: .zero, configuration: config) I've also tried disabling all spellcheck and autocorrect features in the html but that doesn't work either: <div contenteditable="true" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></div> Is there anything I can do to turn it off? Or, is it possible to know when the WebView is predicting text?
1
0
216
6d
Issue sending web push notification to iOS
Hello all, I'm building a web application in ASP.NET MVC (.NET Framework 4.7.2), from this web app I need to send push notifications to users. For the ones who are logged in with windows/android, everything works as expected, but I can't manage to get it work on the apple side. If I use the same methods to subscribe to push notifications, it shows me the popup that asks the user to enable push notifications, and then I get an endpoint like this: https://web.push.apple.com/QKC1Muic0H7... It doesn't work using this (taking the part after https://web.push.apple.com/), I keep getting "Bad device token" (trying to send the notification via APNS). Then I found out that there is another method to register the device from the frontend, and this one should give me the real device token: window.safari.pushNotification.requestPermission But this one doesn't show me the popup, it gives me "denied" without a reason. I'm trying to a test application which is here https://pwa.vctplanner.it, the web push id is web.it.vctplanner, I created a push package downloadable from POST https://pwa.vctplanner.it/api/v2/PushPackages/web.it.vctplanner, and the code from the frontend is this: function registerSafariPush() { // Controlla se Safari Push Notifications è disponibile if (!('safari' in window) || !('pushNotification' in window.safari)) { console.log("Safari Push Notifications non supportate su questo browser."); return; } // Il tuo Website Push ID registrato su Apple Developer var websitePushId = "web.it.vctplanner"; // Controlla lo stato della permission var permissionData = window.safari.pushNotification.permission(websitePushId); switch (permissionData.permission) { case 'default': // L'utente non ha ancora deciso window.safari.pushNotification.requestPermission( 'https://pwa.vctplanner.it', // URL del server che serve il Push Package websitePushId, {}, // dati opzionali da inviare al server function (permission) { if (permission.permission === 'granted') { console.log("Notifiche push abilitate!"); sendSubscriptionToServer({ endpoint: permission.deviceToken }); } else { console.log("Notifiche push non abilitate dall'utente."); } } ); break; case 'denied': // L'utente ha negato console.log("Notifiche push negate."); break; case 'granted': // L'utente ha già autorizzato console.log("Notifiche push già autorizzate."); sendSubscriptionToServer({ endpoint: permissionData.deviceToken }); break; } } Any suggestions of what I'm missing? Is there a complete guide to how generate the push package? Thank you
0
0
194
6d
iOS 26 Safari & WebView: VisualViewport.offsetTop not reset after keyboard dismissal, causing fixed elements misplacement
System/device combinations where the issue does not occur: Physical device: iOS 26.0 (23A5318c) + iPhone 16 Pro Max System/device combinations where the issue does occur: System versions: Physical device: iOS 26.0 (23A5330a), iOS 26.0 (23A340) Simulator: iOS 26.0 (23A339) Device models: Physical device: iPhone 12 Reproducible in Safari, WKWebView, and UIWebView: Yes Actual behavior In WebView (and identically in Safari): Before the keyboard is shown, header/footer elements with position: fixed are correctly aligned with the screen viewport. Scrolling up/down works as expected. After the keyboard appears, the visualViewport position changes. Bug: When the keyboard is dismissed, visualViewport.offsetTop does not reset to 0. As a result, fixed header/footer elements remain misaligned: When scrolling down, the position looks correct. When scrolling up, the header/footer are visibly offset. Steps to reproduce Focus an input field → the keyboard appears Dismiss the keyboard Observe that visualViewport.offsetTop remains >0 (does not reset to zero) position: fixed header/footer elements are misplaced relative to the screen Expected behavior After the keyboard is dismissed, visualViewport.height should return to match the layout viewport, and visualViewport.offsetTop should reset to 0. When scrolling upward, fixed elements should remain correctly positioned within the layout viewport. Minimal reproducible demo A simple HTML file containing: A header and footer with position: fixed An input element to trigger the keyboard <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <title>H5 吸顶吸底页面 Demo</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; height: 2000px; /* 设置内容高度 */ background-color: #f0f8ff; /* body 背景浅蓝色 */ padding-top: 120px; /* 预留 header 高度 */ padding-bottom: 60px; /* 预留 footer 高度 */ overflow-x: hidden; } /* 吸顶 Header */ header { position: fixed; top: 0; left: 0; width: 100%; height: 120px; background-color: #ff6b6b; /* 红色 */ display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; z-index: 1000; } /* 吸底 Footer */ footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background-color: #4ecdc4; /* 青绿色 */ display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold; z-index: 1000; } /* 输入框样式 */ .input-container { margin: 100px auto; width: 80%; max-width: 600px; text-align: center; } input[type='text'] { padding: 12px; font-size: 16px; border: 2px solid #ddd; border-radius: 8px; width: 100%; box-sizing: border-box; } input[type='text']:focus { outline: none; border-color: #4ecdc4; } </style> </head> <body> <!-- 吸顶 Header --> <header>吸顶 Header (120px)</header> <!-- 主体内容 --> <div class="input-container"> <input type="text" placeholder="请输入内容..." /> </div> <!-- 吸底 Footer --> <footer>吸底 Footer (60px)</footer> </body> </html>
9
9
2.0k
1w
iOS 26 Safari & WebView: VisualViewport.offsetTop not reset after keyboard dismissal, causing fixed elements misplacement
1. System/device combinations where the issue does not occur: Physical device: iOS 26.0 (23A5318c) + iPhone 16 Pro Max 2. System/device combinations where the issue does occur: System versions: Physical device: iOS 26.0 (23A5330a), iOS 26.0 (23A340) Simulator: iOS 26.0 (23A339) Device models: Physical device: iPhone 12 Reproducible in Safari, WKWebView, and UIWebView: Yes Actual behavior In WebView (and identically in Safari): Before the keyboard is shown, header/footer elements with position: fixed are correctly aligned with the screen viewport. Scrolling up/down works as expected. After the keyboard appears, the visualViewport position changes. Bug: When the keyboard is dismissed, visualViewport.offsetTop does not reset to 0. As a result, fixed header/footer elements remain misaligned: When scrolling down, the position looks correct. When scrolling up, the header/footer are visibly offset. Steps to reproduce Focus an input field → the keyboard appears Dismiss the keyboard Observe that visualViewport.offsetTop remains >0 (does not reset to zero) position: fixed header/footer elements are misplaced relative to the screen Expected behavior After the keyboard is dismissed, visualViewport.height should return to match the layout viewport, and visualViewport.offsetTop should reset to 0. When scrolling upward, fixed elements should remain correctly positioned within the layout viewport. Minimal reproducible demo A simple HTML file containing: A header and footer with position: fixed An input element to trigger the keyboard <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <title>H5 吸顶吸底页面 Demo</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; height: 2000px; /* 设置内容高度 */ background-color: #f0f8ff; /* body 背景浅蓝色 */ padding-top: 120px; /* 预留 header 高度 */ padding-bottom: 60px; /* 预留 footer 高度 */ overflow-x: hidden; } /* 吸顶 Header */ header { position: fixed; top: 0; left: 0; width: 100%; height: 120px; background-color: #ff6b6b; /* 红色 */ display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; z-index: 1000; } /* 吸底 Footer */ footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background-color: #4ecdc4; /* 青绿色 */ display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold; z-index: 1000; } /* 输入框样式 */ .input-container { margin: 100px auto; width: 80%; max-width: 600px; text-align: center; } input[type='text'] { padding: 12px; font-size: 16px; border: 2px solid #ddd; border-radius: 8px; width: 100%; box-sizing: border-box; } input[type='text']:focus { outline: none; border-color: #4ecdc4; } </style> </head> <body> <!-- 吸顶 Header --> <header>吸顶 Header (120px)</header> <!-- 主体内容 --> <div class="input-container"> <input type="text" placeholder="请输入内容..." /> </div> <!-- 吸底 Footer --> <footer>吸底 Footer (60px)</footer> </body> </html>
21
19
5.7k
1w
How do I update the list of valid redirect URLs for Sign In With Apple for Web?
I've been using Sign In with Apple for Web for the last six months, and it works well enough. Now, I'm updating the domain of the main application (we got the .com! yeah!) However, I can't find a way in the configuration UI to update the allowed redirect URLs for the application. I go to Identifiers -> My App -> Capabilities -> Sign In with Apple -> Edit button. It just allows me to edit whether this is a primary ID, or grouped ID, plus a callback URL (which I'm not currently using.)
0
0
555
1w
iOS 26 BETA 4 Safari Web Extension disappearing right after install, "extension" is no longer available.
our company created a web safari extension. before iOS 26 (beta) release we would archive our extension and install to our devices no problem. since iOS 26 (beta) (we also tried in beta 4 23A5297m) the extension would archive perfectly but when installing the extension would just not run. its found in settings under safari extension, but when enabled the extension and open safari it will show error message "Ext" is no longer available. to rule out all code issues, we built a new project from scratch with a new bundle id, tried to archive with no problem, but when installed in an iphone 16 with iOS 26 BETA (23A5297m) same error ocurs it installs but when opening safari it will give an error message saying extension is no longer available. attached in the google drive link is a zip file of the new project, a zip file with a succesfull build of the ipa file with enterprise distribute, a video of the entire proccess and the error that the iphone gives. also attached a log file from the iphone that includes the install and the crash of the app. within the logs there is a log saying Error occurred during transaction: The provided identifier "dev.sacal.ext" is invalid. before ios 26 the exact steps worked perfectly. https://drive.google.com/file/d/1PYDOv8IRvRY_ouqiOc0sJdcfh0CHbL72/view?usp=sharing
7
2
806
1w
ios26 Safari Web Extension for enterprice distribution:
Safari Web Extension for enterprice distribution: If I press run button on xcode it shows the safari web extension toggle and works perfect When installed through exported ipa, the web extension toggle dissapears, it doesnt matter how it was installed through mdm, link, or directly ipa from xcode I just exported an ipa as debugging and it worked when I pushed the ipa
1
0
298
1w
Apple Pay button not showing up in apple pay demo site.
MacOS: 12 ( Monterrey ) Safari: 17.6 Demo Site: https://applepaydemo.apple.com/ At the bottom where the Apple Pay button should appear, I see a warning something like "This browser doesn't support Apple Pay, please use safari" along with a link to requirements for apple pay. All the requirements are fulfilled, OS and Safari's version are above the minimum required. Link was opened in Safari. And the other thing is if I open the same site in Chrome, I can see the apple pay button and when I click on it a QR appears which is the expected behaviour. How to resolve this?
0
0
177
1w
declarativeNetRequest addOrReplaceParams adds a parameter when already present
I'm trying to use DNR to force safe search with Qwant search engine. Under certain circumstances (scenario described below) the search is performed with an API which contains the safe search level in a URL parameter. A typical query URL is https://api.qwant.com/v3/search/web?q=test&count=10&locale=fr_FR&offset=0&device=desktop&tgp=1&safesearch=0&displayed=true&llm=true. I want a DNR rule to force safesearch to be 2 (= strict) (from some javascript code) : { id: 1, priority: 1, action: { type: 'redirect', "redirect": { "transform": { "queryTransform": { "addOrReplaceParams": [{ "key": "safesearch", "value": "2" }] } } } }, condition: { "urlFilter": "api.qwant.com/v3/search", "resourceTypes": ["xmlhttprequest"] }, } When this rule is activated, I end up with a URL with the original safesearch parameter AND the forced one : https://api.qwant.com/v3/search/web?q=test&count=10&locale=fr_FR&offset=0&device=desktop&tgp=1&safesearch=0&displayed=true&llm=true&safesearch=2. To reproduce this request (with the previous DNR rule in place) : navigate to https://www.qwant.com search for some string (test in my case). This displays the list of results ; click the engine button at the top right to display the settings pane ; inspect network request performed by this page ; change the Adult filter in the list -> the results are automatically updated with the new settings. The web request shows URL with the 2 safesearch parameters. I already used addOrReplaceParams in 'standard' contexts (main_frame) and it works just fine. Any hint on what goes on ? Thank you.
0
0
360
1w
Handling POST-based Authentication Flow with ASWebAuthenticationSession and MDM Client Certificate
Hello, I have an authentication flow where my app communicates with a backend protected by F5 client certificate validation. The client certificate is distributed via MDM and is available in the device keychain, but not accessible directly from the app. When using ASWebAuthenticationSession (or SFSafariViewController) Safari can successfully pick up and present the certificate during authentication, so that part works fine. However, the backend’s authenticate endpoint only supports a POST request with an Authorization header, whereas ASWebAuthenticationSession only accepts a GET URL when starting the session. My questions are: How is this type of flow typically implemented in iOS? Should the backend provide a GET-based endpoint that redirects into the POST, or is there a recommended iOS pattern (e.g., an intermediate HTML page that does the POST after certificate validation)? Are there Apple guidelines on handling certificate-based auth with ASWebAuthenticationSession when the API requires POST, especially for In-House distributed apps? Any guidance or best practices would be very helpful.
Topic: Safari & Web SubTopic: General
0
0
296
1w
Guideline 3.2.2 Rejection - Correct Implementation for Donations via SFSafariViewController
Hello everyone, We've had our app rejected twice under Guideline 3.2.2 regarding charitable donations, and we're seeking clarification on the correct implementation. We've read the guidelines but want to confirm the technical approach with the community's experience. The Rejection Reason: Apple states: "We still noticed that your app includes the ability to collect charitable donations within the app..." They specify that since we are not an approved nonprofit, we must use one of the alternatives, primarily: "provide a link to your website that launches the default browser or SFSafariViewController for users to make a donation." Our Current (Rejected) Implementation: User taps a "Help" button in our native app. A native modal appears inside our app where the user enters their donation amount and email address for the receipt. The user clicks "Donate," which then opens an SFSafariViewController to our website's payment page (e.g., Stripe, PayPal). The amount and email are passed as URL parameters to pre-fill the form. Our Questions for the Community: Is the issue solely the fact that we have a native modal for data entry? We understand we cannot process the payment in-app, but we thought collecting the intent (amount, email) was acceptable before handing off to Safari. What is the definitive, compliant flow? Option A: Should the "Help" button do nothing more than open an SFSafariViewController to a generic donations landing page on our website (https://ourwebsite.com/donate), with no data pre-filled? The user must then navigate and enter all information on the website itself. Option C: The rejection also mentions SMS. Has anyone had success implementing a "Text-to-Donate" link instead of a web flow? Wording: The button in our app currently says "Donate". Should this be changed to a more passive call to action like "Visit Website to Donate" to make it absolutely clear the transaction is external? We want to ensure our next submission is successful. Any insight, especially from developers who have successfully navigated this exact rejection, would be immensely helpful. Thank you.
0
0
284
1w
Safari Technology Preview closes unexpectedly on external monitor
If the Safari Technology Preview window is located on an external monitor with DisplayLink and the computer goes to sleep (screen saver), when it returns, it closes with an error. If the window is located on another monitor that is connected by USB, it does not close. Equipo: Macbook Pro M4 Pro SO: MacOS Sequoia 15.6.1 Safari Technology Preview: Release 227 (preview version work fine) DisplayLink Manager: 13.0.1 (build 46)
6
0
208
2w