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

Activity

Calling webViewWebContentProcessDidTerminate on FOREGROUND and Safari and other browser. That happens only real iPhone
Hell.o I developed web base mobile application these: https://class.mangoedu.co.kr https://betaclass.mangoedu.co.kr https://testclass.mangoedu.co.kr Page is loaded well other platform (Windows, Android...). and Mac. and iPad. and iPhone on Simulator. but only did not load page in REAL iPhones. The issue started intermittently about a month ago, but has recently become almost constant. and this problem is not a code level. Help us please. to iPhone OS/Webkit develop & operation team.
Topic: Safari & Web SubTopic: General
9
0
921
3w
Analysis of issues on Safari with liquid glass
Hello, As previous reports have already shown, there seems to be a few issues on the latest version of Safari, mainly around: Modals taking up the full viewport Elements positioned at the bottom of the screen This also seems to affect the modals on apple.com/iphone. I've recently done an analysis of what can and can't be done in code to work with the new liquid glass UI and thought I'd share my findings here. The full write up, along with screenshots and the demos I used are available in this repository: https://github.com/stevenocchipinti/liquid-glass-spike A brief summary of the findings: The conditions for a fullscreen modal overlay element to cover the entire screen with a position: fixed; seems to be: The background must be semi-transparent Solid colours, linear-gradients, etc. don't work The container must be empty This also means the standard and ::backdrop don't seem to work. The conditions for a bottom sheet to cover the entire screen, including the area around the Safari toolbar seems to be: The element must be positioned within 3px from the bottom of the viewport The height must be within a certain threshold If I've missed anything, please let me know. It would be really nice to have some official documentation on these issues to explain to developers how to do this properly.
Topic: Safari & Web SubTopic: General Tags:
0
4
106
4w
Safe areas ignored after navigating a WebView/WebPage back in a NavigationStack
I'm using the new iOS 26 WebPage/WebView for SwiftUI in a NavigationStack. The initial load works as expected, but when loading items from the back/forward lists, the content jumps beneath the navigation bar: struct WebPageTestView: View { var webPage = WebPage() var body: some View { NavigationStack { WebView(webPage) .toolbar { Button("Back") { if let backItem = webPage.backForwardList.backList.last { webPage.load(backItem) } } Button("Forward") { if let forwardItem = webPage.backForwardList.forwardList.first { webPage.load(forwardItem) } } } } .task { webPage.isInspectable = true webPage.load(URL(string: "https://domchristie.co.uk/")) } } } I have run this on the iOS 26.0 and 26.1 Simulators and get the same issue. The demo website does not use any JavaScript. I was able to replicate this behaviour using a wrapped WKWebView and calling the .ignoresSafeArea(.all) modifier.
3
1
468
3w
Is Apple aiming to improve PWA support in iOS?
iOS 26 introduced a significant step back for PWAs - you now need at least five taps to add a PWA to your home screen. Android has excellent PWA support - it takes 1 tap to install an app, and the platform support is great, and web apps feel amazing. The gap between the platforms has now increased even further. My team and I were hoping for better PWA support, but now we are very worried about the direction - it puts us in a difficult situation. I'm sure many developers face a similar challenge. What's the current status of PWAs in iOS? Is Apple aiming to improve its support in the near future? Is there a roadmap, tech previews, or betas addressing the issue?
Topic: Safari & Web SubTopic: General
0
6
181
4w
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
498
Sep ’25
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
162
Sep ’25
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
195
Sep ’25
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
1
2
327
Sep ’25
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
85
Sep ’25
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
626
Sep ’25
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
145
Sep ’25
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
235
Sep ’25
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
239
Sep ’25
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>
10
11
2.9k
1d
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>
27
26
14k
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
567
Sep ’25
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
10
4
1.5k
2w
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
315
Sep ’25
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
196
Sep ’25