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>
HTML
RSS for tagHypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
Posts under HTML tag
31 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
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>
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>
Hello,
I need some help. I’m creating an application, but in fact it is just an instance of a web page built with WordPress and Elementor.
When submitting it for review, the following adjustment is required:
4.2.2 Design: Minimum Functionality
App example:
https://applink.com.br/appfortrade
Topic:
App Store Distribution & Marketing
SubTopic:
App Store Connect
Tags:
App Store
WebKit
HTML
Safari and Web
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>
How can I make a background image take the entire screen in ios26?
I've tried position fixed, sticky, env() css variables but nothing worked. It does it when in PWA mode, but I would like to do so in the browser too.
We're having trouble connecting to local area network websockets in Safari in the latest iOS26 Beta 3 (iPhone 14), both secure and unsecure. Code works < iOS26 & macOS, etc.
--
Unsecure behaviour: need to call connectWebSocket() twice, establishes connection reliably. Calling connectWebSocket() once, will sometimes work, sometimes not.
--
Secure behaviour: Error in debug console, even though the certificate has been accepted and the page is loaded as https. Error:
WebSocket connection to 'wss://192.168.1.81/api/webSocket' failed: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “192.168.1.81”, which could put your confidential information at risk.
--
let apiEndpoint = window.location.hostname;
if (apiEndpoint == null || apiEndpoint == '') {
apiEndpoint = "192.168.1.81";
}
function connectWebSocket() {
if (webSocket && webSocket.readyState == 1) {
return;
}
if (webSocket) {
webSocket.close();
}
webSocket = new WebSocket(
(window.location.protocol === 'https:' ? "wss://" : "ws://") + apiEndpoint + "/api/webSocket",
);
webSocket.onerror = (error) => {
console.log("WebSocket error", error);
};
webSocket.onopen = () => {
console.log("WebSocket connected");
webSocket.send("volume");
webSocket.send("isPlaying");
};
webSocket.onmessage = (event) => {
const msg = event.data;
if (!msg) return;
if (msg.startsWith("volume")) {
const volume = parseInt(msg.replace('volume:',''));
const slider = document.getElementById("volumeSlider");
slider.value = volume;
slider.style.background = `linear-gradient(to right, #007bff ${volume}%, white ${volume}%)`;
} else if (msg.startsWith("isPlaying")) {
const url = msg.replace('isPlaying:', '');
let matchedEntry = null;
let coverToSelect = null;
categories.forEach((category, catIdx) => {
category.entries.forEach((entry, entryIdx) => {
if (entry.url === url) {
matchedEntry = entry;
coverToSelect = document.querySelector(`.cover[category-idx="${catIdx}"][entry-idx="${entryIdx}"]`);
}
});
});
if (matchedEntry && coverToSelect) {
selectCover(coverToSelect, true);
showNowPlayingBar(matchedEntry);
const top = coverToSelect.getBoundingClientRect().top + window.scrollY - 150;
window.scrollTo({ top, behavior: 'smooth' });
}
}
};
webSocket.onclose = () => {
console.log("WebSocket closed, retrying...");
setTimeout(connectWebSocket, 1000);
};
}
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
connectWebSocket();
}
});
connectWebSocket();
With Swift being brought to new places, is anyone working on interoperability with PHP? I'd love to replace much of my PHP and Javascript web code with Swift (and ideally SwiftUI for UI design). Are there any projects/people working in this space?
I have "http://localhost:8080" showing the index page I've created but php is not handled though an extension is running.
Haven't even tried mySQL yet but since there is no reference to it in https.conf the same problem will exist. Homebrew extension running also.
https.conf:
#PHP was deprecated in macOS 11 and removed from macOS 12
#LoadModule php7_module libexec/apache2/libphp7.so
There are no php.so files on my machine and again no mention of mysql
What should I enter in http.conf to activate these functionalities?
Thanks.
PS could you reference a tutorial on using Safari and Web inspector
So I have web Augmented Reality apps hosted on AWS S3. It worked fine for a month, but as soon as the IOS 18.4 update was installed they stopped working. It works on every other device and IOS versions.
The URLs for the mentioned AR experiences:
digitechonline.in/solsprefimaginewt8/
digitechonline.in/solsprefimaginewt8p2/
digitechonline.in/orocarear/
These AR experiences get stuck on the loading screen and either reload or give an error. Ideally the camera is supposed to open.
I have tested it on Safari, Microsoft Edge and Google Chrome browsers.
They were created through Unity webgl and hosted on AWS S3 bucket. Please provide a quick solution to this.
My app started crashing since iOS 18.4 update. Crashes started happening in 18.4 beta and are still happening in the official 18.4 RTM build (22E240). Crash is happening randomly and I cannot reproduce it, but it affects a few percent of users.
As you can see in log, crash happen when NSAttributedString is loading HTML with init(data:options:documentAttributes:) with .html documentType.
Crash-2025-04-02-154720.ips
Hi, I would like to share a finding and ask for a solution, if possible. This may be a potential bug with PointerMoveEvent on Safari on an iPad with Pencil Pro.
I tested onPointerMove and onTouchMove in a <canvas> element in a React web app for freehand drawing using
Mouse on a PC.
Finger touch on iPad
Apple pencil pro on iPad
Finger touch on iPhone
I was able to draw smooth curves in all cases except when using onPointerMove with Apple pencil pro on iPad. The curve drawn in this case looked like it was created using several straight-line segments.
It seems like the sampling rate for PointerMoveEvent is lower than that of TouchMoveEvent on Safari
I am not sure how to solve this problem or if it is an issue with Safari's interpretation of PointerEvents. Any input is greatly appreciated.
Edit: It seems like https://developer.apple.com/forums/thread/689375
is related.
Hello,
I am looking for help with displaying Smart Banners on mobile devices. What is the preferred coding that can have Smart Banners appear on all devices? I am having an issue where an Smart Banner is not properly functioning as I would like it to. I would like the CTA (Call-To-Action) to be positioned on the top of a mobile screen. If a user has the mobile app already, it should read OPEN and opens into the app when it is clicked. If the user does not have the app, it should read GET and take a user to the mobile app store when it is clicked.
Hello Apple,
i've been using ios for many years and never had any issues with urdu language keyboard, but since the new 18.4 beta update some words are not working correctly as it should like a name of my friend who's name is "راعنیہ" but the new updated version cannot type is together and keep seperating like "راعنی ہ" its so frustrating to use like that and its not just one but so many other words that it just cannot do properly also the new font and no gap concept its hurting my eyes so much while reading or even typing.. i hope apple fixes that asap..
thankyou
input type="file"でアップロードした画像データからGPS情報が除去されます。
こちらはiPadOS16.5.1で発生しておりました。
iPadOS17.4.1、iPadOS18.3では正常にGPS情報が保持されます。
iOS、iPadOSのアップデートでGPS情報を保持するよう修正されたと見受けられますが、リリースノートを参照しても上記修正についての記事を見つけられませんでした。
お手数ですが、上記修正に該当する記事をご教示頂けませんでしょうか。
どうぞよろしくお願い致します。
In the Safari browser on mobile devices, the tags in an HTML element are styled with the system's default styles. I want the text inside the tags to be displayed without line breaks. However, in reality, the text wraps according to its length. May I ask if there are any methods to achieve this?
(ps: CSS-related properties such as white-space: nowrap do not work.)
On iOS (iPhone or iPad) the following behaviour happens:
when both an HTML video element and an HTML audio element are playing on a page,
and the video source ends,
and the video source is programmatically forced to play again
then the system will automatically pause the audio.
See following stackblitz project for a sample:
https://stackblitz.com/edit/ios-audio-paused-on-video-playing?file=README.md
Steps to reproduce
Feel free to try with both another audio and video source, here limited by the available space in Stackblitz plan.
On an iPhone/iPad device or simulator, in Safari:
browse to index.html
when on iPhone, press iPhone Load to force preloading video. Not needed on iPad
press Play to start playing both audio and video
wait until clip ends and then restarts from 0:00
Expected
Audio should keep on playing and eventually loop.
Actual
When clip restarts from 0, audio is put to pause by the system.
Further details
This does not happen e.g. on Mac Safari nor on another device/browser.
Also, some alternative scenarios:
when HTML video element has the muted attribute, the issue disappears and audio is not paused
when HTML audio element is replace with Web Audio API, the issue disappears and audio is not paused
I'm encountering an issue displaying a large HTML string (over 11470 characters) in a UILabel. Specifically, the Arabic text within the string is rendering left-to-right instead of the correct right-to-left direction. I've provided a truncated version of the HTML string and the relevant code snippet below. I've tried setting the UILabel's text alignment to right, but this didn't resolve the issue. Could you please advise on how to resolve this bidirectional text rendering problem?
The results of the correct and incorrect approaches are shown in the image below.
Here's the relevant Swift code:
let labelView: UILabel = {
let label = UILabel()
label.textAlignment = .right
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.semanticContentAttribute = .forceRightToLeft
label.backgroundColor = .white
label.lineBreakMode = .byWordWrapping
return label
}()
//Important!!
//It must exceed 11470 characters.
let htmlString = """
<p style=\"text-align: center;\"><strong>İSTİÂZE</strong></p> <p>Nahl sûresindeki:</p>
<p dir="rtl" lang="ar"> فَاِذَا قَرَاْتَ الْقُرْاٰنَ فَاسْتَعِذْ بِاللّٰهِ مِنَ الشَّيْطَانِ الرَّج۪يمِ </p>
<p><strong>“</strong><strong>Kur’an okuyacağın zaman kovulmuş şeytandan hemen Allah’a sığın!</strong><strong>”</strong> (Nahl 16/98) emri gereğince Kur’ân-ı Kerîm okumaya başlarken:</p> <p dir="rtl" lang="ar">اَعُوذُ بِاللّٰهِ مِنَ الشَّيْطَانِ الرَّج۪يمِ</p> <p><em>“Kovulmuş şeytandan Allah’a sığınırım” </em>deriz. Bu sözü söylemeye “istiâze<em>” denilir. “Eûzü”</em>, sığınırım, emân dilerim, yardım taleb ederim, gibi anlamlara gelir. It must exceed 11470 characters.</p>
“””
if let data = htmlString.data(using: .utf8) {
let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
.documentType: NSAttributedString.DocumentType.html,
.characterEncoding: String.Encoding.utf8.rawValue
]
do {
let attributedString = try NSAttributedString(data: data, options: options, documentAttributes: nil)
labelView.attributedText = attributedString
} catch {
print("HTML string işlenirken hata oluştu: \(error)")
}
}
I'm using iOS 18.2 and Swift 6. Any suggestions on how to correct the bidirectional text rendering?
I'm working on a cross-platform C# application that converts HTML content to PDF. The goal is to render dynamic HTML pages (including CSS and JavaScript) as high-quality, printable PDF files. Additionally, I need to support features like adding headers/footers, securing PDFs with passwords, and controlling user permissions. While everything works well on Windows, I need some help rendering consistency and handling permissions on MacOS.
After updating my phone to iOS 18.2 2 days ago, I noticed that a website I'm working on that uses Rafael JS(https://dmitrybaranovskiy.github.io/raphael) to do some svg rendering which used to work before I updated just stopped working.
I notice that Safari tries to load website tries to load 2 or 3 times before showing the error: A problem repeatedly occurred on <website> which I find really odd since this used to work before and I haven't made any changes to the code.
This also happens in Chrome on iOS 18.2.