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>
Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
We are seeing an issue in Safari on iOS 26 where the a automatic unfocus of on select box dismisses the second one.
<select name="choice1" onblur="console.log('onblur1');" onfocus="console.log('onfocus1');">
<option value="first">First Value</option>
<option value="second" selected>Second Value</option>
<option value="third">Third Value</option>
</select>
<select name="choice2" onblur="console.log('onblur2');" onfocus="console.log('onfocus2')">
<option value="first">First Value</option>
<option value="second" selected>Second Value</option>
<option value="third">Third Value</option>
</select>
select something in choice1.
quickly tap choice2 before onblur1 is logged.
At the timing of onblur1 the selection menu for choice2 is dismissed.
Anyone know how to fix this behavior?
I'm looking for answer or documentation on gatekeeper and launching a MacOS app via a url scheme/custom protocol.
Our application is delivered via a zip file downloaded from the web. We utilize a url scheme. The act of extracting the app from the zip registers the url scheme with the OS.
From previous research/testing we found we had to break the gatekeeper lock (have the user move the app from the downloaded location) to ensure that the url is honored on first launch of the application. To ensure user compliance, we added a check to make sure that the lock has been removed by looking at the quarantine attribute.
This flow is not ideal. I am looking for alternatives and was previously under the impression that if we were to move to a DMG then that would provide the user a better user experience for moving it. However, now that I am getting
around to looking into it, I am seeing some implied statements that this is not the case and that the quarantine bit will just be moved from the DMG to the app.
Questions:
Does a DMG allow the app to be launched via custom protocol without prior launch or movement?
With a notarized app, will the custom protocol work on a subsequent launch, even without prior movement?
Topic:
Safari & Web
SubTopic:
General
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
Please!
is there an app or anything I can do
ive posted multiple times.
Ive researched all that I can
even with screen time on and web limits it still lets u swipe to delete history! Yes it’s grayed out but u can still swipe and delete it!!
I'm developing a web extension for Safari on iOS using MV3.
The extension is working fine in Chrome, but in Safari I experience some seemingly random issues. I would like to debug it, but here is my problem.
I have my iPhone connected via cable to Mac, and it works fine with XCode, so I assume this part is OK.
I open Safari or Safari Tech Preview (doesn't matter) on my Mac, developers options are enabled, and in the Develop menu, under my iPhone section, there are things I can debug. There is an entry "[Ext name] - Extension Service Worker" but when I click it, it's empty. Web inspector pops up, but there are no network requests, no logs, nothing. I know the extension is working, because I can stream log to my HTTP server, but I don't see them here at all. I can use console to trigger commands like chrome.storage.local.get(null, console.log) and it shows my local store, so why I don't see any logs? Also, the background script is not visible in the Sources tab, just one weird request:
navigator.serviceWorker.register('safari-web-extension://E3449EA7-EC25-4696-8E6C-[ID HERE]/background.js');
</script>
Any ideas what went wrong? The entire team of 4 people has the same issue and we can't move forward because of that.
Also, the Develop => Service workers or any other menu section doesn't show my service worker. Logs for websites running on my phone are visible and in general web inspector for them works fine.
I have observed Safari App starts crashing when running with my safari extension.
Our Safari extension polls the host app every 60s. The extension receives and completes requests in
func beginRequest(with context: NSExtensionContext)
(we always call context.completeRequest(...)). The crash is intermittent: beginRequest itself does not throw.
Looking for guidance about likely causes. I am attaching the snippet from crash report.
Crashed Thread: 0 Dispatch queue: com.apple.main-thread
Exception Type: EXC_CRASH (SIGKILL)
Exception Codes: 0x0000000000000000, 0x0000000000000000
Termination Reason: Namespace RUNNINGBOARD, Code 3490524077
Thread 0 Crashed:: Dispatch queue: com.apple.main-thread
0 libsystem_kernel.dylib 0x1856f5c34 mach_msg2_trap + 8
1 libsystem_kernel.dylib 0x1857083a0 mach_msg2_internal + 76
2 libsystem_kernel.dylib 0x1856fe764 mach_msg_overwrite + 484
3 libsystem_kernel.dylib 0x1856f5fa8 mach_msg + 24
4 CoreFoundation 0x185822cbc __CFRunLoopServiceMachPort + 160
5 CoreFoundation 0x1858215d8 __CFRunLoopRun + 1208
6 CoreFoundation 0x185820a98 CFRunLoopRunSpecific + 572
7 HIToolbox 0x1912c327c RunCurrentEventLoopInMode + 324
8 HIToolbox 0x1912c64e8 ReceiveNextEventCommon + 676
9 HIToolbox 0x191451484 _BlockUntilNextEventMatchingListInModeWithFilter + 76
10 AppKit 0x189745a34 _DPSNextEvent + 684
11 AppKit 0x18a0e4940 -[NSApplication(NSEventRouting) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 688
12 Safari 0x1b801cce4 -[BrowserApplication nextEventMatchingMask:untilDate:inMode:dequeue:] + 228
13 AppKit 0x189738be4 -[NSApplication run] + 480
14 AppKit 0x18970f2dc NSApplicationMain + 880
15 Safari 0x1b83dd0b0 SafariMain + 468
16 dyld 0x185396b98 start + 6076
Hi! I'm trying to implement ASWebAuthenticationSession to log in to my app via the web app backend. However, I'm a bit confused about the cookies that this has access to. When I set prefersEphemeralWebBrowserSession=false it does not seem to use the cookies from Safari. Or at least, I'm logged into my web app in Safari, but when I use ASWebAuthenticationSession I still have to log in again. Does it not share session cookies with Safari?
I did notice that if I don't use an ephemeral session, once I log out and try to log back in my app does automatically log me in but that's actually unhelpful in my opinion because now I have no way to clear that session because it only lives in the ASWebAuthenticationSession context. If that's the case I may as well use the ephemeral session then because it seems to have only drawbacks.
Since probably the late iOS 17.4.x, 17.5.1 and still now in 17.6 beta our extension has been experiencing issues with the accompanying background script or service worker being permanently killed with no warning after about 30-45 seconds after initial installation (installation, not page load!).
In all other browsers (including Safari on MacOS) unloading the service worker is part of the normal lifecycle to save memory and CPU if it is idle. In our extension the service worker is used only during the first 5-10 seconds of every page visit, so we are used to seeing it unload after that and consider this a good thing. However, normally, the service worker is able to wake back up when needed - which is no longer the case in iOS.
Once dead, nothing a normal user would do can wake the service worker back up:
No events like webNavigation or similar will trigger anymore
Any attempt to call sendMessage to it from a content-script also does not wake up the service worker and instead returns undefined to the content script immediately
Closing and opening Safari does not start it again
The only two things that will give the service worker another 30-40 seconds of life is a reboot of the device or disabling and then re-enabling the extension. During those few second the extension is working perfectly.
There are no errors or indications in the logs of what is going on and the extension works just fine in Chrome, Firefox, Edge as well as Safari on MacOS and Safari in the Mobile simulator. Only actual iOS devices fail.
It seems like a temporary workaround is to change the manifest to not load the service worker as a service worker by changing
"background": {
"service_worker": "service.js"
}
to
"background": {
"scripts": ["service.js"],
"persistent": false
}
With this change (courtesy of https://forums.developer.apple.com/forums/thread/721222) the service worker is still unloaded but correctly starts up again when needed. Having to make this change does not seem to be consistent with manifest v3 specs though (see this part in Chrome’s migration guide as an example: https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#update-bg-field).
According to the release notes of 17.6 beta this bug was supposedly fixed:
“Fixed an issue where Safari Web Extension background pages would stop responding after about 30 seconds. (127681420)”
However, this bug is not fixed - or at least not entirely fixed. It seems to work better for super simple tests doing nothing but pinging the service worker from the content script, but for the full blown extension there is no difference at all between 17.5.1 and 17.6.
Has there been a change in policy about service workers and background scripts for Safari in iOS?
Are anyone else seeing this issue?
Also seemingly related:
https://forums.developer.apple.com/forums/thread/756309
https://forums.developer.apple.com/forums/thread/750330
https://developer.apple.com/forums/thread/757926
https://forums.developer.apple.com/forums/thread/735307
Hi Developers,
I am working on a small project and I noticed that my website header looks different in Safari on macOS compared to Windows browsers like Chrome and Edge.
In Safari, the header text and spacing look slightly shifted (screenshot attached).
On Windows browsers, everything looks perfectly aligned.
Here is my live project for reference: https://gratuitycalculatorae.com/
Screenshot from Safari (macOS):
Is this related to Safari-specific CSS rendering?
Should I use -webkit- specific fixes or is there a better cross-browser solution?
Any guidance or best practices would be really helpful. Thanks
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.
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.
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
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
I’m experiencing an issue in WKWebView on iOS 26 Developer Beta 8. If a view's subview contains a WKWebView, using the CALayer's renderInContext method fails to capture the pixel at the current point, and the console outputs "unsupported surface format: &b38".
The following code snippet was functioning as expected on iOS 18 and iOS 26 beta 1. However, it no longer works in the latest beta.
Is this a known bug in the current iOS 26 betas, or is there a recommended workaround?
- (BOOL)isTransparentAtTouchPoint:(CGPoint)point layer:(CALayer *)layer {
unsigned char pixel[4] = {0};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(pixel, 1, 1, 8, 4, colorSpace, (CGBitmapInfo) kCGImageAlphaPremultipliedLast);
CGContextTranslateCTM(context, -point.x, -point.y);
[layer renderInContext:context];
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
CGFloat alpha = pixel[3] / 255.0f;
return alpha < 0.01;
}
hi
Testing on OS26 Public Beta 6.
In Safari, if you enter x homepage and scroll, the tab bar sticks to the bottom and moves.
Make the keyboard appear in the search window
When scrolling down on the Safari homepage again, the issue of not being able to stick to the bottom appears.
Is it because the liquid glass UI was applied this time? and safari bug?
Please let me know if I'm missing anything
Topic:
Safari & Web
SubTopic:
General
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
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.
Hello everyone,
I'm working on an app that uses WKWebView.
My app uses a custom menu and we disable the default menu by overriding with:
WKWebAction.canPerformAction()
However, with the new iOS 18.2 release, I am no longer able to override the "Copy Link with Highlight" option that pops up when highlighting a selection as can be seen from the screenshot:
Has anyone found a work around/bypass for this?
Environment
iOS Version: iOS 18.2
Device: iPhone 13 Pro
App platform: iOS
Xcode version: 16.1
MacOS: 14.5
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>