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

Learn more
All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Activity

IOS 26, web extensions no longer available
I recently upgraded my device from IOS 18.4 to IOS 26. My web extension has disapeared from safari. I can see it in Settings > Apps > Safari > Extensions and when I turn it on and re-open safari. I just get a mesasge that says "{extension name} is no longer avaiable". I have tried Manifest V2 and Manifest V3 both yield the same results. The current production extension bundled with the IOS app has the same problem. I can no longer use or test my own extension !? Help please !
Topic: Safari & Web SubTopic: General Tags:
3
1
583
Jul ’25
False positive 'Deceptive Website' warning for personal domain
Hi everyone, i'm running into a problem with my personal domain being flagged as 'deceptive website' in safari, and i can't figure out how to fix it Domain: neon0404.space This is just my personal domain - i use it for adguard home, vaultwarden, some test stuff, sometimes small web tools for friends or family Nothing illegal or malicious has ever been hosted there On july 6, i launched a very simple web utility for a friend when he opened it on ios safari, he got the red 'deceptive website warning' I checked this on other different devices - all got the same warning The next day (july 7) i submitted a review request via websitereview.apple.com, but got no reply I did some digging and found that safari safe browsing daemon pulls data from google safe browsing, tencent safe browsing, and some apple's internal lists So, going one-by-one https://transparencyreport.google.com/safe-browsing/search showed up that domain is flagged for something shady Signed up in google search console and saw my domain was flagged for 'malware links' (with no related urls listed), so looked like a false positive I audited everything related to this domain on august 5 - nothing suspicious Next day i requested a review in Google Search Console, just next day Google confirmed that everything is ok and removed the flag So, i thought, maybe this was the key and requested another review via websitereview.apple.com (august 7) No reply, domain still flagged While i was waiting, i checked domain in Tencent (https://urlsec.qq.com/check.html) - no issues Other services like VirusTotal, Norton and Sucuri showed up same result - no issues I attempted to contact regular support (even though it's not their area of responsibility), but just in case They, as expected, couldn't do anything At this point it feels like a dead end, so i'm here Has anyone been through this before? Is there any other way to escalate the review process with apple? Really appreciate any advice, as this domain is personal and linked to my username, which i want to use later
Topic: Safari & Web SubTopic: General Tags:
1
0
791
Aug ’25
WebKit https post return html use javascript send WebSocket Request
In my application, I use HTML pages to display the interface. Since it’s a cross-platform app, the pages and interactions work properly on other platforms. However, in WebKit, because HTTPS protocol is used, JS requests from the page cannot use the ws protocol but must use the wss protocol under HTTPS. Is there any way to allow a webpage under HTTPS to use ws requests normally? Google Chrome can do this.
Topic: Safari & Web SubTopic: General
0
0
114
Jun ’25
header and footer positions shifted in Safari tab settings
Thank you for supporting me. My environment Device: iPhone 15 Pro OS: iOS 26.0 Public Beta (23A5336a) In iOS 26, three types of tabs were added to Safari. Depending on the option, the behavior of the fixed header and footer can be unstable. *Tab settings can be changed in the iOS Settings app under "Apps -> Safari" > "Tabs." The following behavior differs depending on the tab. Compact When scrolling down, the header and footer shift up by a few pixels. A margin is created between the footer and the URL input field. Bottom Behaves the same as "Compact." Top The header is completely hidden below the URL input field at the top of the screen, leaving a margin below the footer. Below is the sample code to check the operation. <!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>固定ヘッダー/フッター + モーダル</title> <style> :root { --header-h: 56px; --footer-h: 56px; } body { margin: 0; font-family: sans-serif; line-height: 1.6; background: #f9fafb; padding-top: var(--header-h); padding-bottom: var(--footer-h); } header .inner, footer .inner { width: 100%; max-width: var(--max-content-w); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } header, footer { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: #fff; } header { top: 0; height: var(--header-h); border-bottom: 1px solid #ddd; } footer { bottom: 0; height: var(--footer-h); border-top: 1px solid #ddd; } main { padding: 16px; } .btn { padding: 8px 16px; border: 1px solid #2563eb; background: #2563eb; color: #fff; border-radius: 6px; cursor: pointer; } /* モーダル関連 */ .modal { position: fixed; inset: 0; display: none; z-index: 1000; } .modal.is-open { display: block; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .modal__panel { position: relative; max-width: 600px; margin: 10% auto; background: #fff; border-radius: 8px; padding: 20px; z-index: 1; } .modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .modal__title { margin: 0; font-size: 18px; font-weight: bold; } .modal__close { background: none; border: none; font-size: 20px; cursor: pointer; } </style> </head> <body> <header> <div class="inner"> <h1>デモページ</h1> <button id="openModal" class="btn">モーダルを開く</button> </div> </header> <main class="container" id="main"> <h2>スクロール用の適当なコンテンツ1</h2> <p>ヘッダーとフッターは常に表示されます。モーダルボタンを押すと、画面いっぱいのダイアログが開きます。</p> <!-- ダミーカードを複数 --> <section class="grid"> <div class="card"><strong>カード1</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード2</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード3</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード4</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード5</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード6</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード7</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード8</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード9</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード10</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> </section> </main> <footer> <small>&copy; 2025 Demo</small> </footer> <!-- モーダル --> <div class="modal" id="modal"> <div class="modal__backdrop"></div> <div class="modal__panel"> <div class="modal__head"> <h2 class="modal__title">モーダル</h2> <button class="modal__close" id="closeModal">&times;</button> </div> <p>これは白いビューのモーダルです。背景は黒く半透明で覆われています。</p> </div> </div> <script> const modal = document.getElementById('modal'); const openBtn = document.getElementById('openModal'); const closeBtn = document.getElementById('closeModal'); const backdrop = modal.querySelector('.modal__backdrop'); openBtn.addEventListener('click', () => { modal.classList.add('is-open'); }); function closeModal() { modal.classList.remove('is-open'); } closeBtn.addEventListener('click', closeModal); backdrop.addEventListener('click', closeModal); window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('is-open')) { closeModal(); } }); </script> </body> </html>
Topic: Safari & Web SubTopic: General Tags:
3
0
845
Sep ’25
Safari Flags My Rebuilt Site as Deceptive — Need Review / Whitelisting
Hi Apple Devs & WebKit Team, We operate https://excnum.com — a personal website currently under reconstruction. It's HTTPS-secure, hosted on a clean VPS, and now features a simple placeholder page with no active forms, scripts, or external redirects. However, Safari on both iOS and macOS is flagging it as a “deceptive website”, blocking all access. This warning appears even though: The site uses a valid SSL certificate via Cloudflare There are no redirects, tracking scripts, or dynamic code We serve a static landing page (“under maintenance”) with zero interaction No malware, phishing, or obfuscation exists — verified with multiple tools A review request has already been submitted at: https://websitereview.apple.com We believe the site may have been blacklisted previously under past ownership or prior configurations. It has since been completely restructured and cleared, but the Safari warning persists. This false flag is harming visibility and trust for an otherwise neutral website. Any advice on how to expedite re-evaluation or request a manual delisting from the deceptive site list would be much appreciated. Thank you! — Alex Admin, EXCNUM.COM
Topic: Safari & Web SubTopic: General Tags:
0
0
578
Jul ’25
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.)
Topic: Safari & Web SubTopic: General Tags:
0
0
607
Sep ’25
Tab onDetached and Tab onAttached web extension events are no longer generated in macOS 15.4 / Safari 18.4
Hello - we have a Mac application that uses a browser extension and the web extension JS APIs to communicate with Safari. As of macOS 15.4 / Safari 18.4 the tab OnAttached and tab onDetached events are no longer received. After some testing we verified that the events were working properly as of macOS 15.3 / Safari 18.3 but appear to have been broken in macOS 15.4. Note a similar issue was reported previously for Safari 17.6 and was fixed in macOS 15.0 (FB14324177). We have made a TestFlight version of our app (Tabby) available to simplify debugging via https://testflight.apple.com/join/Va8Zdv9d. To reproduce the issue: Install the Tabby TestFlight build on macOS 15.4 or 15.4.1 Open Safari, go to Safari settings and select the Extensions tab Enable the Tabby extension and grant permissions to all windows all the time Open a Safari window with at least 3 tabs Note the open window and tabs displayed in Tabby In Safari, perform a tab detach by dragging a tab out of the window Expected behavior Within Safari the detached tab should now be in it’s own window, and via the onDetached event Tabby should update to show the tab in it’s own window AND removed from the original window. Observed Safari fails to send the onDetached event and Tabby will continue to display the detached tab in its original window in addition to the new window. You can also use the repro steps above to observe the onDetached event being received or not by Tabby in the Safari developer console. The same steps but re-attaching the tab to the original window can be used to observe the onAttached event being received or not. We’ve attached two screen recordings to the Feedback ID below, one showing the events working on macOS 15.3, and one showing the events failing to be received on macOS 15.4.1. Note it also fails on macOS 15.4. FEEDBACK ID: FB17367977
Topic: Safari & Web SubTopic: General Tags:
3
0
162
May ’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>
Topic: Safari & Web SubTopic: General Tags:
1
0
568
Sep ’25
How to create a thumbnail for tabs like Safari or Chrome?
In the safari or chrome app, when I want to change tabs, I can go into a grid view of the tabs. In this grid, each tab shows the content of the page. When I click on one of the tabs, the content of the page expands to fill the entire screen (and shrinks when I go back to grid). I'm creating my own browser and I'm trying to replicate this same functionality. I'm using WebKit on XCode 16.4, iOS 18. However, I'm unable to figure out how Chrome and Safari did this. First, I thought that I could take a snapshot of the page and then use that image as the thumbnail. However, very often the image is of the wrong size - likely due to the webview shrinking for the animation. Making the animation wait until the image is made available did help in making it more consistent. The above errors happen whenever I spam the new tab and then click the tab grid button. It only is misaligned on the very last new tab. Please help on this. // OpenedTab.swift Button(action: { tab.getThumbnail { tabManager.selectedTab = nil } }) { ZStack { Image(systemName: "square") .resizable() .frame(width: 25, height: 25) Text(tabManager.tabs.count.description) .font(.subheadline) } } // TabState.swift func getThumbnail(completionHandler: (() -> Void)? = nil) { webView.takeSnapshot(with: nil) { img, err in if let err = err { print("Snapshot err: \(err)") } else { self.thumbnail = img completionHandler?() } } } Also, something I'm noticing is that for some reason, the image is slightly bigger than the header of the tab card. It also happens in the progress view if the thumbnail isn't available. The images above show it too. I have no clue why this is happening and I would love advice on this too. struct TabCardView: View { @StateObject var manager = TabManager.shared @ObservedObject var tab: TabState var namespace: Namespace.ID @State var width: CGFloat = 0 var body: some View { GeometryReader { geo in VStack(spacing: 0) { HStack(spacing: 1) { Text(tab.title ?? tab.url.host() ?? "") .font(.caption2) .padding(.horizontal, 4) .padding(.vertical, 10) Button(action: { manager.close(tab: tab) }) { Image(systemName: "multiply") } } .frame(height: 40) .frame(width: geo.size.width) // .padding(.horizontal, 7) .background(.tertiary) .matchedGeometryEffect(id: tab.id.uuidString + "title", in: namespace) ZStack { if let thumbnail = tab.thumbnail { Image(uiImage: thumbnail) .resizable() .aspectRatio(contentMode: .fill) .frame(width: geo.size.width, height: 160, alignment: .top) .clipped() } else { Color.black.brightness(0.8) ProgressView() } } .frame(width: geo.size.width, height: 160) .matchedGeometryEffect(id: tab.id.uuidString + "container", in: namespace) } .frame(width: geo.size.width) } .frame(height: 200) .clipShape(RoundedRectangle(cornerRadius: 16)) .shadow(radius: 2) .padding(.all, 7) .overlay( RoundedRectangle(cornerRadius: 20) .stroke(.blue, lineWidth: manager.previousTab?.id == tab.id ? 5 : 0) ) .shadow(radius: 1) } }
Topic: Safari & Web SubTopic: General Tags:
1
0
801
Jul ’25
Sign in with Apple JS inside an iframe
Hi everyone, My web application has two services: myapp.com and account.myapp.com. The first manages all app content, while the latter handles the authentication, with Sign In with Apple included. The tech stack is mainly composed of React, JS, and Express. We'd like to allow users to authenticate inside a dialog on some pages of myapp.com. To avoid replicating stuff from one service to another, we put an iframe inside the dialog to show the authentication standard page from account.myapp.com. Email and Facebook processes work fine, but we have the following issues with Sign in with Apple: On desktop, not Safari, a pop-up window opens when you click on the Apple button, and it works as expected. On desktop Safari, the pop-up window is blocked. We want the native Apple pop-up to show instead of a generic browser new window. On mobile, nothing happens on click Obviously, outside the iframe, everything works as expected. I can't seem to find anything related to an iframe constraint in the Sign in with Apple docs. Is this feasible?
Topic: Safari & Web SubTopic: General Tags:
1
0
192
May ’25
WKWebView crashes on iOS 26 with EXC_BAD_ACCESS
Hi, I have an app that uses WKWebView and it's crashing on iOS 26 Simulator in places I've never had problems before. In this case it's crashing when calling WKWebView.callAsyncJavaScript, but in my other project WKWebView is crashing with some sort of EXC_BAD_ACCESS other than callAsyncJavaScript. Am I missing something? Thanks,
Topic: Safari & Web SubTopic: General
3
1
319
Jun ’25
guard let result = try? await evaluateJavaScript Crash
myCode is here // titleScript = "document.querySelector('#\(rawValue) span')?.textContent" guard let titleResult = try? await webView.evaluateJavaScript(type.titleScript), let title = titleResult as? String else { return } this code has error Thread 1: Swift runtime failure: Unexpectedly found nil while implicitly unwrapping an Optional value but edit Code like this It is works Successful do { ... let titleResult = try await webView.evaluateJavaScript(type.titleScript) let title = titleResult as? String ... } catch { LogManager.log(level: .error, self, #function, error, "title is Invalid : \(type.titleScript)") continue } I don't know why guard let _ = try? is Fail
Topic: Safari & Web SubTopic: General Tags:
3
0
167
May ’25
macOS 15.0.1: Any supported way to auto‑enable a Safari App Extension on unmanaged Macs (no MDM)?
Hi all, Question: Can Apple confirm that, on macOS 15 without MDM/supervision, there is no supported API, entitlement, auth right, or config file that can enable a Safari App Extension without some form of user interaction? Environment • OS / Safari: macOS 15.0.1 (Sequoia), Safari 18.x • Distribution: Signed, notarized, stapled PKG installs a host app that contains a Safari App Extension • Management: No MDM allowed (and thus no supervision) • Goal: Have the extension come up enabled immediately after install, without requiring the user to click the checkbox in Safari Settings ▸ Extensions What we already know / tried Normal install flow – After PKG install, the extension shows up disabled. User must check the box to enable. SFSafariApplication.showPreferencesForExtension(...) – We can deep‑link the user to our row, but they still need to click “Enable.” Accessibility/UI scripting – We can script the click if the user grants our helper Accessibility permission. That still involves user interaction. .mobileconfig with Safari Extensions Management (AlwaysOn) – From what I can tell, this requires a supervised device enrolled in MDM. Installing that profile manually on an unsupervised Mac does not enforce the “AlwaysOn” state. Auth rights / Developer mode – Looked at auth.db rights like com.apple.Safari.allow-unsigned-app-extensions, and the Develop menu “Allow Unsigned Extensions.” Neither appears to auto‑enable a signed extension, and we don’t want to use private/unsupported APIs anyway. Thanks in advance for any clarification.
Topic: Safari & Web SubTopic: General
1
0
351
Jul ’25
Issue with Copy Functionality in WKWebView Using Mac Catalyst
Hello, I am developing a Mac application via Mac Catalyst and encountering an issue with WKWebView. Specifically, I'm loading a webpage (e.g., https://translate.google.com) in WKWebView, but when I press the copy button on the page, the content doesn't actually copy to the clipboard. I've attempted modifying the UserAgent without any success. Here is the relevant part of my code: override func viewDidLoad() { super.viewDidLoad() let config = WKWebViewConfiguration() config.preferences = WKPreferences() config.defaultWebpagePreferences.preferredContentMode = .desktop let webView = WKWebView(frame: .zero, configuration: config) webView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(webView) webView.scrollView.showsVerticalScrollIndicator = false webView.backgroundColor = UIColor.white webView.scrollView.backgroundColor = UIColor.white webView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true webView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true webView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true webView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true if let url = URL(string: "https://translate.google.com") { let req = URLRequest(url: url) webView.load(req) } }
Topic: Safari & Web SubTopic: General Tags:
5
0
1k
Jun ’25
Embed issue
When we embed some of the youtube videos are unable to load in the Mobile app but at the same time it works in Website. I need to allow it in both places. I have tried both embed and native sdk for youtube in iOS.
Topic: Safari & Web SubTopic: General Tags:
0
0
509
Jul ’25
iOS 18 Safari and WKWebview, "NotSupportedError" issue when playing videos
WKWebview of iOS 18 includes Safari browser. When playing videos, some videos show "NotSupportedError: The operation is not supported.", but it is normal on iOS15 devices. The video link is as follows. Even if it is downloaded and referenced locally in HTML, it cannot be played, so it is ruled out that it is a network problem. https://ydtj-adas.oss-cn-shanghai.aliyuncs.com/e6yun.com/exam/exam/a35447b496b94e5e9a6aab27d62c867e.mp4 cannot be played https://ydtj-adas.oss-cn-shanghai.aliyuncs.com/e6yun.com/exam/exam/82d970957a7d4e8d88c13cd101143005.mp4 can be played
Topic: Safari & Web SubTopic: General Tags:
1
0
231
May ’25
IOS 26, web extensions no longer available
I recently upgraded my device from IOS 18.4 to IOS 26. My web extension has disapeared from safari. I can see it in Settings > Apps > Safari > Extensions and when I turn it on and re-open safari. I just get a mesasge that says "{extension name} is no longer avaiable". I have tried Manifest V2 and Manifest V3 both yield the same results. The current production extension bundled with the IOS app has the same problem. I can no longer use or test my own extension !? Help please !
Topic: Safari & Web SubTopic: General Tags:
Replies
3
Boosts
1
Views
583
Activity
Jul ’25
False positive 'Deceptive Website' warning for personal domain
Hi everyone, i'm running into a problem with my personal domain being flagged as 'deceptive website' in safari, and i can't figure out how to fix it Domain: neon0404.space This is just my personal domain - i use it for adguard home, vaultwarden, some test stuff, sometimes small web tools for friends or family Nothing illegal or malicious has ever been hosted there On july 6, i launched a very simple web utility for a friend when he opened it on ios safari, he got the red 'deceptive website warning' I checked this on other different devices - all got the same warning The next day (july 7) i submitted a review request via websitereview.apple.com, but got no reply I did some digging and found that safari safe browsing daemon pulls data from google safe browsing, tencent safe browsing, and some apple's internal lists So, going one-by-one https://transparencyreport.google.com/safe-browsing/search showed up that domain is flagged for something shady Signed up in google search console and saw my domain was flagged for 'malware links' (with no related urls listed), so looked like a false positive I audited everything related to this domain on august 5 - nothing suspicious Next day i requested a review in Google Search Console, just next day Google confirmed that everything is ok and removed the flag So, i thought, maybe this was the key and requested another review via websitereview.apple.com (august 7) No reply, domain still flagged While i was waiting, i checked domain in Tencent (https://urlsec.qq.com/check.html) - no issues Other services like VirusTotal, Norton and Sucuri showed up same result - no issues I attempted to contact regular support (even though it's not their area of responsibility), but just in case They, as expected, couldn't do anything At this point it feels like a dead end, so i'm here Has anyone been through this before? Is there any other way to escalate the review process with apple? Really appreciate any advice, as this domain is personal and linked to my username, which i want to use later
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
791
Activity
Aug ’25
WebKit https post return html use javascript send WebSocket Request
In my application, I use HTML pages to display the interface. Since it’s a cross-platform app, the pages and interactions work properly on other platforms. However, in WebKit, because HTTPS protocol is used, JS requests from the page cannot use the ws protocol but must use the wss protocol under HTTPS. Is there any way to allow a webpage under HTTPS to use ws requests normally? Google Chrome can do this.
Topic: Safari & Web SubTopic: General
Replies
0
Boosts
0
Views
114
Activity
Jun ’25
header and footer positions shifted in Safari tab settings
Thank you for supporting me. My environment Device: iPhone 15 Pro OS: iOS 26.0 Public Beta (23A5336a) In iOS 26, three types of tabs were added to Safari. Depending on the option, the behavior of the fixed header and footer can be unstable. *Tab settings can be changed in the iOS Settings app under "Apps -> Safari" > "Tabs." The following behavior differs depending on the tab. Compact When scrolling down, the header and footer shift up by a few pixels. A margin is created between the footer and the URL input field. Bottom Behaves the same as "Compact." Top The header is completely hidden below the URL input field at the top of the screen, leaving a margin below the footer. Below is the sample code to check the operation. <!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>固定ヘッダー/フッター + モーダル</title> <style> :root { --header-h: 56px; --footer-h: 56px; } body { margin: 0; font-family: sans-serif; line-height: 1.6; background: #f9fafb; padding-top: var(--header-h); padding-bottom: var(--footer-h); } header .inner, footer .inner { width: 100%; max-width: var(--max-content-w); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } header, footer { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: #fff; } header { top: 0; height: var(--header-h); border-bottom: 1px solid #ddd; } footer { bottom: 0; height: var(--footer-h); border-top: 1px solid #ddd; } main { padding: 16px; } .btn { padding: 8px 16px; border: 1px solid #2563eb; background: #2563eb; color: #fff; border-radius: 6px; cursor: pointer; } /* モーダル関連 */ .modal { position: fixed; inset: 0; display: none; z-index: 1000; } .modal.is-open { display: block; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .modal__panel { position: relative; max-width: 600px; margin: 10% auto; background: #fff; border-radius: 8px; padding: 20px; z-index: 1; } .modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .modal__title { margin: 0; font-size: 18px; font-weight: bold; } .modal__close { background: none; border: none; font-size: 20px; cursor: pointer; } </style> </head> <body> <header> <div class="inner"> <h1>デモページ</h1> <button id="openModal" class="btn">モーダルを開く</button> </div> </header> <main class="container" id="main"> <h2>スクロール用の適当なコンテンツ1</h2> <p>ヘッダーとフッターは常に表示されます。モーダルボタンを押すと、画面いっぱいのダイアログが開きます。</p> <!-- ダミーカードを複数 --> <section class="grid"> <div class="card"><strong>カード1</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード2</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード3</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード4</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード5</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード6</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード7</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード8</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード9</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> <div class="card"><strong>カード10</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div> </section> </main> <footer> <small>&copy; 2025 Demo</small> </footer> <!-- モーダル --> <div class="modal" id="modal"> <div class="modal__backdrop"></div> <div class="modal__panel"> <div class="modal__head"> <h2 class="modal__title">モーダル</h2> <button class="modal__close" id="closeModal">&times;</button> </div> <p>これは白いビューのモーダルです。背景は黒く半透明で覆われています。</p> </div> </div> <script> const modal = document.getElementById('modal'); const openBtn = document.getElementById('openModal'); const closeBtn = document.getElementById('closeModal'); const backdrop = modal.querySelector('.modal__backdrop'); openBtn.addEventListener('click', () => { modal.classList.add('is-open'); }); function closeModal() { modal.classList.remove('is-open'); } closeBtn.addEventListener('click', closeModal); backdrop.addEventListener('click', closeModal); window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('is-open')) { closeModal(); } }); </script> </body> </html>
Topic: Safari & Web SubTopic: General Tags:
Replies
3
Boosts
0
Views
845
Activity
Sep ’25
Safari Flags My Rebuilt Site as Deceptive — Need Review / Whitelisting
Hi Apple Devs & WebKit Team, We operate https://excnum.com — a personal website currently under reconstruction. It's HTTPS-secure, hosted on a clean VPS, and now features a simple placeholder page with no active forms, scripts, or external redirects. However, Safari on both iOS and macOS is flagging it as a “deceptive website”, blocking all access. This warning appears even though: The site uses a valid SSL certificate via Cloudflare There are no redirects, tracking scripts, or dynamic code We serve a static landing page (“under maintenance”) with zero interaction No malware, phishing, or obfuscation exists — verified with multiple tools A review request has already been submitted at: https://websitereview.apple.com We believe the site may have been blacklisted previously under past ownership or prior configurations. It has since been completely restructured and cleared, but the Safari warning persists. This false flag is harming visibility and trust for an otherwise neutral website. Any advice on how to expedite re-evaluation or request a manual delisting from the deceptive site list would be much appreciated. Thank you! — Alex Admin, EXCNUM.COM
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
578
Activity
Jul ’25
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.)
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
607
Activity
Sep ’25
Tab onDetached and Tab onAttached web extension events are no longer generated in macOS 15.4 / Safari 18.4
Hello - we have a Mac application that uses a browser extension and the web extension JS APIs to communicate with Safari. As of macOS 15.4 / Safari 18.4 the tab OnAttached and tab onDetached events are no longer received. After some testing we verified that the events were working properly as of macOS 15.3 / Safari 18.3 but appear to have been broken in macOS 15.4. Note a similar issue was reported previously for Safari 17.6 and was fixed in macOS 15.0 (FB14324177). We have made a TestFlight version of our app (Tabby) available to simplify debugging via https://testflight.apple.com/join/Va8Zdv9d. To reproduce the issue: Install the Tabby TestFlight build on macOS 15.4 or 15.4.1 Open Safari, go to Safari settings and select the Extensions tab Enable the Tabby extension and grant permissions to all windows all the time Open a Safari window with at least 3 tabs Note the open window and tabs displayed in Tabby In Safari, perform a tab detach by dragging a tab out of the window Expected behavior Within Safari the detached tab should now be in it’s own window, and via the onDetached event Tabby should update to show the tab in it’s own window AND removed from the original window. Observed Safari fails to send the onDetached event and Tabby will continue to display the detached tab in its original window in addition to the new window. You can also use the repro steps above to observe the onDetached event being received or not by Tabby in the Safari developer console. The same steps but re-attaching the tab to the original window can be used to observe the onAttached event being received or not. We’ve attached two screen recordings to the Feedback ID below, one showing the events working on macOS 15.3, and one showing the events failing to be received on macOS 15.4.1. Note it also fails on macOS 15.4. FEEDBACK ID: FB17367977
Topic: Safari & Web SubTopic: General Tags:
Replies
3
Boosts
0
Views
162
Activity
May ’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>
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
568
Activity
Sep ’25
How to create a thumbnail for tabs like Safari or Chrome?
In the safari or chrome app, when I want to change tabs, I can go into a grid view of the tabs. In this grid, each tab shows the content of the page. When I click on one of the tabs, the content of the page expands to fill the entire screen (and shrinks when I go back to grid). I'm creating my own browser and I'm trying to replicate this same functionality. I'm using WebKit on XCode 16.4, iOS 18. However, I'm unable to figure out how Chrome and Safari did this. First, I thought that I could take a snapshot of the page and then use that image as the thumbnail. However, very often the image is of the wrong size - likely due to the webview shrinking for the animation. Making the animation wait until the image is made available did help in making it more consistent. The above errors happen whenever I spam the new tab and then click the tab grid button. It only is misaligned on the very last new tab. Please help on this. // OpenedTab.swift Button(action: { tab.getThumbnail { tabManager.selectedTab = nil } }) { ZStack { Image(systemName: "square") .resizable() .frame(width: 25, height: 25) Text(tabManager.tabs.count.description) .font(.subheadline) } } // TabState.swift func getThumbnail(completionHandler: (() -> Void)? = nil) { webView.takeSnapshot(with: nil) { img, err in if let err = err { print("Snapshot err: \(err)") } else { self.thumbnail = img completionHandler?() } } } Also, something I'm noticing is that for some reason, the image is slightly bigger than the header of the tab card. It also happens in the progress view if the thumbnail isn't available. The images above show it too. I have no clue why this is happening and I would love advice on this too. struct TabCardView: View { @StateObject var manager = TabManager.shared @ObservedObject var tab: TabState var namespace: Namespace.ID @State var width: CGFloat = 0 var body: some View { GeometryReader { geo in VStack(spacing: 0) { HStack(spacing: 1) { Text(tab.title ?? tab.url.host() ?? "") .font(.caption2) .padding(.horizontal, 4) .padding(.vertical, 10) Button(action: { manager.close(tab: tab) }) { Image(systemName: "multiply") } } .frame(height: 40) .frame(width: geo.size.width) // .padding(.horizontal, 7) .background(.tertiary) .matchedGeometryEffect(id: tab.id.uuidString + "title", in: namespace) ZStack { if let thumbnail = tab.thumbnail { Image(uiImage: thumbnail) .resizable() .aspectRatio(contentMode: .fill) .frame(width: geo.size.width, height: 160, alignment: .top) .clipped() } else { Color.black.brightness(0.8) ProgressView() } } .frame(width: geo.size.width, height: 160) .matchedGeometryEffect(id: tab.id.uuidString + "container", in: namespace) } .frame(width: geo.size.width) } .frame(height: 200) .clipShape(RoundedRectangle(cornerRadius: 16)) .shadow(radius: 2) .padding(.all, 7) .overlay( RoundedRectangle(cornerRadius: 20) .stroke(.blue, lineWidth: manager.previousTab?.id == tab.id ? 5 : 0) ) .shadow(radius: 1) } }
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
801
Activity
Jul ’25
Add to Home Screen is not working in Safari on iOS 26.
The “Add to Home Screen” feature for bookmarks is not working in Safari on iOS 26.
Topic: Safari & Web SubTopic: General
Replies
1
Boosts
0
Views
144
Activity
Jul ’25
Sign in with Apple JS inside an iframe
Hi everyone, My web application has two services: myapp.com and account.myapp.com. The first manages all app content, while the latter handles the authentication, with Sign In with Apple included. The tech stack is mainly composed of React, JS, and Express. We'd like to allow users to authenticate inside a dialog on some pages of myapp.com. To avoid replicating stuff from one service to another, we put an iframe inside the dialog to show the authentication standard page from account.myapp.com. Email and Facebook processes work fine, but we have the following issues with Sign in with Apple: On desktop, not Safari, a pop-up window opens when you click on the Apple button, and it works as expected. On desktop Safari, the pop-up window is blocked. We want the native Apple pop-up to show instead of a generic browser new window. On mobile, nothing happens on click Obviously, outside the iframe, everything works as expected. I can't seem to find anything related to an iframe constraint in the Sign in with Apple docs. Is this feasible?
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
192
Activity
May ’25
Chrome's Incognito mode can not open app from universal link on iOS
Chrome's Incognito mode can not open app from universal link on iOS. It's opened a web page instead of launching the app even the app already installed on the iOS device.
Topic: Safari & Web SubTopic: General
Replies
0
Boosts
0
Views
112
Activity
Jul ’25
WKWebView crashes on iOS 26 with EXC_BAD_ACCESS
Hi, I have an app that uses WKWebView and it's crashing on iOS 26 Simulator in places I've never had problems before. In this case it's crashing when calling WKWebView.callAsyncJavaScript, but in my other project WKWebView is crashing with some sort of EXC_BAD_ACCESS other than callAsyncJavaScript. Am I missing something? Thanks,
Topic: Safari & Web SubTopic: General
Replies
3
Boosts
1
Views
319
Activity
Jun ’25
WebKit for SwiftUI: Observations
Is the new Observations API for WebPage not available in Beta 1 as demoed in the WWDC video? I get this error even though Observation is imported.
Topic: Safari & Web SubTopic: General Tags:
Replies
5
Boosts
0
Views
227
Activity
Jul ’25
guard let result = try? await evaluateJavaScript Crash
myCode is here // titleScript = "document.querySelector('#\(rawValue) span')?.textContent" guard let titleResult = try? await webView.evaluateJavaScript(type.titleScript), let title = titleResult as? String else { return } this code has error Thread 1: Swift runtime failure: Unexpectedly found nil while implicitly unwrapping an Optional value but edit Code like this It is works Successful do { ... let titleResult = try await webView.evaluateJavaScript(type.titleScript) let title = titleResult as? String ... } catch { LogManager.log(level: .error, self, #function, error, "title is Invalid : \(type.titleScript)") continue } I don't know why guard let _ = try? is Fail
Topic: Safari & Web SubTopic: General Tags:
Replies
3
Boosts
0
Views
167
Activity
May ’25
macOS 15.0.1: Any supported way to auto‑enable a Safari App Extension on unmanaged Macs (no MDM)?
Hi all, Question: Can Apple confirm that, on macOS 15 without MDM/supervision, there is no supported API, entitlement, auth right, or config file that can enable a Safari App Extension without some form of user interaction? Environment • OS / Safari: macOS 15.0.1 (Sequoia), Safari 18.x • Distribution: Signed, notarized, stapled PKG installs a host app that contains a Safari App Extension • Management: No MDM allowed (and thus no supervision) • Goal: Have the extension come up enabled immediately after install, without requiring the user to click the checkbox in Safari Settings ▸ Extensions What we already know / tried Normal install flow – After PKG install, the extension shows up disabled. User must check the box to enable. SFSafariApplication.showPreferencesForExtension(...) – We can deep‑link the user to our row, but they still need to click “Enable.” Accessibility/UI scripting – We can script the click if the user grants our helper Accessibility permission. That still involves user interaction. .mobileconfig with Safari Extensions Management (AlwaysOn) – From what I can tell, this requires a supervised device enrolled in MDM. Installing that profile manually on an unsupervised Mac does not enforce the “AlwaysOn” state. Auth rights / Developer mode – Looked at auth.db rights like com.apple.Safari.allow-unsigned-app-extensions, and the Develop menu “Allow Unsigned Extensions.” Neither appears to auto‑enable a signed extension, and we don’t want to use private/unsupported APIs anyway. Thanks in advance for any clarification.
Topic: Safari & Web SubTopic: General
Replies
1
Boosts
0
Views
351
Activity
Jul ’25
Issue with Copy Functionality in WKWebView Using Mac Catalyst
Hello, I am developing a Mac application via Mac Catalyst and encountering an issue with WKWebView. Specifically, I'm loading a webpage (e.g., https://translate.google.com) in WKWebView, but when I press the copy button on the page, the content doesn't actually copy to the clipboard. I've attempted modifying the UserAgent without any success. Here is the relevant part of my code: override func viewDidLoad() { super.viewDidLoad() let config = WKWebViewConfiguration() config.preferences = WKPreferences() config.defaultWebpagePreferences.preferredContentMode = .desktop let webView = WKWebView(frame: .zero, configuration: config) webView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(webView) webView.scrollView.showsVerticalScrollIndicator = false webView.backgroundColor = UIColor.white webView.scrollView.backgroundColor = UIColor.white webView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true webView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true webView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true webView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true if let url = URL(string: "https://translate.google.com") { let req = URLRequest(url: url) webView.load(req) } }
Topic: Safari & Web SubTopic: General Tags:
Replies
5
Boosts
0
Views
1k
Activity
Jun ’25
Embed issue
When we embed some of the youtube videos are unable to load in the Mobile app but at the same time it works in Website. I need to allow it in both places. I have tried both embed and native sdk for youtube in iOS.
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
509
Activity
Jul ’25
iOS 18 Safari and WKWebview, "NotSupportedError" issue when playing videos
WKWebview of iOS 18 includes Safari browser. When playing videos, some videos show "NotSupportedError: The operation is not supported.", but it is normal on iOS15 devices. The video link is as follows. Even if it is downloaded and referenced locally in HTML, it cannot be played, so it is ruled out that it is a network problem. https://ydtj-adas.oss-cn-shanghai.aliyuncs.com/e6yun.com/exam/exam/a35447b496b94e5e9a6aab27d62c867e.mp4 cannot be played https://ydtj-adas.oss-cn-shanghai.aliyuncs.com/e6yun.com/exam/exam/82d970957a7d4e8d88c13cd101143005.mp4 can be played
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
231
Activity
May ’25
Problem about Certificates, Identifiers & Profiles
There is no plus button ![](" https://developer.apple.com/kr/forums/content/attachment/4c286784-7329-4e31-a5b1-8dd0c9aaf9ad" "title=test.png;width=2330;height=982")
Topic: Safari & Web SubTopic: General Tags:
Replies
1
Boosts
0
Views
350
Activity
Jul ’25