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>
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
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>
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.)
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
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
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?
I'm trying to use DNR to force safe search with Qwant search engine.
Under certain circumstances (scenario described below) the search is performed with an API which contains the safe search level in a URL parameter. A typical query URL is https://api.qwant.com/v3/search/web?q=test&count=10&locale=fr_FR&offset=0&device=desktop&tgp=1&safesearch=0&displayed=true&llm=true.
I want a DNR rule to force safesearch to be 2 (= strict) (from some javascript code) :
{
id: 1,
priority: 1,
action: {
type: 'redirect',
"redirect": {
"transform": {
"queryTransform": {
"addOrReplaceParams": [{ "key": "safesearch", "value": "2" }]
}
}
}
},
condition: { "urlFilter": "api.qwant.com/v3/search", "resourceTypes": ["xmlhttprequest"] },
}
When this rule is activated, I end up with a URL with the original safesearch parameter AND the forced one : https://api.qwant.com/v3/search/web?q=test&count=10&locale=fr_FR&offset=0&device=desktop&tgp=1&safesearch=0&displayed=true&llm=true&safesearch=2.
To reproduce this request (with the previous DNR rule in place) :
navigate to https://www.qwant.com
search for some string (test in my case). This displays the list of results ;
click the engine button at the top right to display the settings pane ;
inspect network request performed by this page ;
change the Adult filter in the list -> the results are automatically updated with the new settings. The web request shows URL with the 2 safesearch parameters.
I already used addOrReplaceParams in 'standard' contexts (main_frame) and it works just fine. Any hint on what goes on ?
Thank you.
Hello,
I have an authentication flow where my app communicates with a backend protected by F5 client certificate validation. The client certificate is distributed via MDM and is available in the device keychain, but not accessible directly from the app.
When using ASWebAuthenticationSession (or SFSafariViewController) Safari can successfully pick up and present the certificate during authentication, so that part works fine.
However, the backend’s authenticate endpoint only supports a POST request with an Authorization header, whereas ASWebAuthenticationSession only accepts a GET URL when starting the session.
My questions are:
How is this type of flow typically implemented in iOS?
Should the backend provide a GET-based endpoint that redirects into the POST, or is there a recommended iOS pattern (e.g., an intermediate HTML page that does the POST after certificate validation)?
Are there Apple guidelines on handling certificate-based auth with ASWebAuthenticationSession when the API requires POST, especially for In-House distributed apps?
Any guidance or best practices would be very helpful.
Topic:
Safari & Web
SubTopic:
General
Hello everyone,
We've had our app rejected twice under Guideline 3.2.2 regarding charitable donations, and we're seeking clarification on the correct implementation. We've read the guidelines but want to confirm the technical approach with the community's experience.
The Rejection Reason:
Apple states: "We still noticed that your app includes the ability to collect charitable donations within the app..." They specify that since we are not an approved nonprofit, we must use one of the alternatives, primarily: "provide a link to your website that launches the default browser or SFSafariViewController for users to make a donation."
Our Current (Rejected) Implementation:
User taps a "Help" button in our native app.
A native modal appears inside our app where the user enters their donation amount and email address for the receipt.
The user clicks "Donate," which then opens an SFSafariViewController to our website's payment page (e.g., Stripe, PayPal). The amount and email are passed as URL parameters to pre-fill the form.
Our Questions for the Community:
Is the issue solely the fact that we have a native modal for data entry? We understand we cannot process the payment in-app, but we thought collecting the intent (amount, email) was acceptable before handing off to Safari.
What is the definitive, compliant flow?
Option A: Should the "Help" button do nothing more than open an SFSafariViewController to a generic donations landing page on our website (https://ourwebsite.com/donate), with no data pre-filled? The user must then navigate and enter all information on the website itself.
Option C: The rejection also mentions SMS. Has anyone had success implementing a "Text-to-Donate" link instead of a web flow?
Wording: The button in our app currently says "Donate". Should this be changed to a more passive call to action like "Visit Website to Donate" to make it absolutely clear the transaction is external?
We want to ensure our next submission is successful. Any insight, especially from developers who have successfully navigated this exact rejection, would be immensely helpful.
Thank you.
If the Safari Technology Preview window is located on an external monitor with DisplayLink and the computer goes to sleep (screen saver), when it returns, it closes with an error.
If the window is located on another monitor that is connected by USB, it does not close.
Equipo: Macbook Pro M4 Pro
SO: MacOS Sequoia 15.6.1
Safari Technology Preview: Release 227 (preview version work fine)
DisplayLink Manager: 13.0.1 (build 46)
Video in Landscape takes 2 taps on X to close.This issue can be replicated on iphone 14 ios 18.5.There is no issue on iPhone 15 ios 18.5.
window.location.href = "tel:02-xxxx-xxxx"
Can the development team modify the screen text? Or can the country code be erased?
What are the reasons for continuing to be "on the phone" if the country code is automatically attached to the phone like this?
Topic:
Safari & Web
SubTopic:
General
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
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>© 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">×</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>
window.location.href = 'tel:0216700310'; I ran the code in an IOS environment. The number was displayed when the call button on the device appeared. However, other IOS devices besides some devices came out as a number starting with +82, and I received feedback that the call was not connected properly. I wonder what could be caused by only some devices. And I would also like to ask what can be done to allow the numbers on the code to be displayed and called as they are.
Topic:
Safari & Web
SubTopic:
General