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>
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
29 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
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
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 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.
we are using angular and Html5 to develop our application, in our application we play videos that are placed on s3. Video when played on desktop borwser are adequatley audible but when played on iPad their volume is too low to be audible. I have tried
video.volume =1 but it does not work for iPad because this property is only readable for ios devices.
I have tried using javascript audioContext. It worked for my local machine. But when code is deployed on some hosted environments, it just does not work.
Did anyone face the same issue? Any help regarding it will be appreciated.
i use navigator.mediaDevices.getUserMedia to wake up camera, when i use constraint with '{video:{facingMode: {exact: 'user'}}}'，occur a error"invalid constraint"
There is a display issue when viewing HTML containing ruby tags on Safari for iPad. The layout appears distorted.
Steps to reproduce:
Preparation:
Device: iPad mini (MUQY2J/A) / iPad Air (MM9F3J/A)
Open Safari.
Access the following URL:
https://67440d05c7b448995b6e5619--admirable-muffin-193494.netlify.app/
The text in the left cell overlaps with the text in the right cell.
Please refer to the attached file:
Notes:
This issue does not occur when ruby tags are absent.
The same issue occurs in Chrome as well (possibly a WebKit-related problem?).
Description:
When using a multilingual keyboard that includes Korean in iOS 18, the input element's onChange event is triggered multiple times instead of just once. This issue occurs not only when entering numbers with input type="tel" or inputMode="numeric", but also when entering text with input type="text". This causes unexpected behavior in forms and other input-related functionalities.
Affected Devices and OS Version:
Device: iPhone 16 Pro
OS Version: iOS 18.0
You can reproduce the issue with this CodeSandbox example:
https://codesandbox.io/p/sandbox/elegant-dream-jnqh39
Steps to reproduce:
Use a multilingual keyboard (e.g., Korean and English) on iOS 18.
Type some text into the input field (input type="text").
Also try entering numbers using input type="tel" or inputMode="numeric".
Observe that the onChange event is fired multiple times for both text and numeric input.
Expected behavior:
The onChange event should only be triggered once when text or numeric input changes.
Additional Information:
This issue has been reported under feedback ID FB15377631. Currently waiting for a response from Apple regarding this feedback.