navigator.permissions.query -> permissionStatus.onchange
is Supposed to listen to the event of a change in permissions in the
browser settings.
This works for all browsers, but in Safari for iOS and MacOS this seems to be broken in the currently recent versions 17.x
Example:
navigator.permissions.query({ name: 'notifications' }).then((permissionStatus) => {
permissions = permissionStatus.state; // this value gets set correctly
permissionStatus.onchange = () => {
// This will not get executed when permissions have been changed
// within the safari settings app, or iOS Settings for PWA or Safari
};
});
Can someone from Apple's Webkit Team please comment on this?
Thank you.
T.
WebKit
RSS for tagDisplay web content in windows and implement browser features using WebKit.
Posts under WebKit tag
200 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Subject:
iOS 26 WKWebView: Remote Pages Become Unresponsive After Loading Local HTML Files
Description
We're experiencing a critical issue with WKWebView in a React Native 0.64.3 application where remote web pages become completely unresponsive after loading local HTML files in iOS 26. It works well before iOS26.
Environment:
React Native 0.64.3
iOS 26.0
Xcode 26.0.1
Using custom WKWebView implementations in Native modules
Problem Details
App loads local HTML files using loadFileURL:allowingReadAccessToURL:
Later, when loading remote pages via loadRequest:, the remote pages load successfully but become unresponsive to user interactions
This occurs even when using different WKWebView instances
The issue is reproducible 100% of the time once a local file has been loaded
Restarting the app and loading remote pages directly works fine
Code Example:
// Loading local file (works fine)
[self.webView loadFileURL:localFileURL allowingReadAccessToURL:accessURL];
// Later, loading remote page (loads but becomes unresponsive)
NSURLRequest *request = [NSURLRequest requestWithURL:remoteURL];
[self.webView loadRequest:request];
What We've Tried:
Using different WKWebView instances for local vs remote content
Comprehensive cleanup in dealloc (removing all user scripts and message handlers)
Loading blank HTML before switching to remote content
Using shared WKProcessPool (understanding its limitations in iOS 15+)
Ensuring proper decisionHandler management in navigation delegates
Resetting WKWebView configuration settings
Clearing cookies and cache between loads
Using loadFileRequest:allowingReadAccessToURL: instead of loadFileURL:
Key Observations:
The remote page renders correctly and network requests complete
No JavaScript errors in console
The view hierarchy appears normal in Debug View Hierarchy
Touch events seem to be delivered but not processed by the web content
Questions:
Has Apple introduced new security restrictions in iOS 26 that affect the transition from file:// URLs to http:// URLs?
Are there specific WKWebView configuration changes required for React Native applications in iOS 26?
Could this be related to the React Native bridge or JavaScript context persistence?
Any insights or workarounds would be greatly appreciated, as this is blocking our iOS 26 compatibility.
When trying to create an anchor with the download attribute it does not work for PDF files, it displays the files inline.
Also when the download attribute is set the target attribute is ignored too.
The tag:
...
The behavior:
It displaies the file in line.
The correct behavior:
The file should be downloaded and not displayed or at least displayed but with the "_blank" target (new tab).
This is an issue when working with WebSockets which is closed when the file is opened inline.
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>
Hello,
I'm using Safari 18.2 on Sonoma 14.6.1.
I was using the Developer Tools to do a Local Request Override in the Source tab for a CSS file that had a changing query string. I thought I had a good regular expression to catch all variants, but apparently it was too generic and possibly wrong, and made both Source and Network tabs no longer work in my Safari.
The regular expression I entered for the Local Request Override was: //build/style.css(?.*)?$
Now my dev tools is broken to the extent that the Source and Network tabs no longer work. The slide-out panel on Source that shows Breakpoints, LocalOverrides, etc no longer shows. The toggle for it does, but does nothing now. UI in general looks a little wack on both tabs.
So, since I can't turn off the Local Request Override, I've been trying to locate where Safari may have stored it to manually delete it. Not having a lot of luck on that front.
It seems to me that Safari was unable to escape my regular expression correctly and it then causes additional issue. Just a guess though.
Any advice or help in getting Safari Source & Network working again / manual removal of the LocalOverride would be greatly appreciated. I'm fluent in OSX and Linux, but grep was not much help surfacing anything that worked.
Thanks in Advance, possibly a Safari bug as well.
I want to print the content of a WKWebView. I've done some searching, and many people have struggled with this over the years. Some claimed success, but their solutions don't work for me. One person created images for each pages and printed that, but then if you were to print to PDF, you'd get a PDF containing images rather than text.
If I just call the printView(_:)) method of the view, I get blank pages.
With the following more elaborate code, I get a partial printout, 11 out of what should be about 13 pages.
let info = NSPrintInfo.shared
info.topMargin = 72.0;
info.bottomMargin = 72.0;
info.leftMargin = 72.0;
info.rightMargin = 72.0;
info.isVerticallyCentered = false;
info.isHorizontallyCentered = false;
info.horizontalPagination = .fit;
info.verticalPagination = .automatic;
let printOp = webView!.printOperation( with: info )
printOp.canSpawnSeparateThread = true
printOp.view?.frame = NSMakeRect( 0, 0,
info.paperSize.width, info.paperSize.height )
printOp.runModal(for: webView.window!, delegate: self,
didRun: nil, contextInfo: nil )
When I run the above under the debugger, I see console messages saying
CGContextClipToRect: invalid context 0x0.
Once the print dialog appears, if I touch (but not change) the selected printer, then the page count changes to the correct value.
Hello,
I'm exploring the new SwiftUI WebView and WebPage APIs introduced in iOS 26, and I have a question about configuring media playback behavior.
In our app, we currently use WKWebView with the mediaTypesRequiringUserActionForPlayback property set to [] (or WKAudiovisualMediaTypeNone) to allow HTML videos with an "autoplay" attribute to play automatically without requiring user interaction. This property is part of WKWebViewConfiguration and controls which media types require a user gesture to begin playing. According to the official documentation (WKWebViewConfiguration.mediaTypesRequiringUserActionForPlayback), this allows us to support video content that needs to autoplay for our specific use case.
With the new iOS 26 WebView and WebPage APIs, I haven't been able to find a way to configure this behavior. Looking through the available configuration options, there doesn't appear to be an equivalent setting.
My questions are:
Has the default behavior changed for the new SwiftUI WebView? Does it now allow media autoplay by default?
If not, is there a way to configure this behavior that I'm missing?
If this configuration is intentionally not exposed, what is the recommended approach for apps that need to enable media autoplay?
Currently, we're wrapping WKWebView in a UIViewRepresentable to maintain this functionality, but we'd love to migrate to the native SwiftUI WebView later this year if possible.
Thank you for any guidance you can provide!
Hello,
I'm exploring the new SwiftUI WebView and WebPage APIs introduced in iOS 26, and I have a question about configuring JavaScript window opening behavior.
In our app, we currently use WKWebView with the javaScriptCanOpenWindowsAutomatically property set to true to support a specific use case. This property is part of WKPreferences and controls whether JavaScript can open windows without user interaction. According to the official documentation (WKPreferences.javaScriptCanOpenWindowsAutomatically), this property defaults to false on iOS and true on macOS.
With the new iOS 26 WebView and WebPage APIs, I haven't been able to find a way to configure this behavior. Looking through the available configuration options, there doesn't appear to be an equivalent setting.
My questions are:
Has the default behavior changed for the new SwiftUI WebView? Does it now allow JavaScript to open windows automatically by default on iOS?
If not, is there a way to configure this behavior that I'm missing?
If this configuration is intentionally not exposed, what is the recommended approach for apps that need to enable automatic window opening?
Currently, we're wrapping WKWebView in a UIViewRepresentable to maintain this functionality, but we'd love to migrate to the native SwiftUI WebView later this year if possible.
Thank you for any guidance you can provide!
you guys literally need update this video of introducing the swifui webview. these apis even not exist...
https://developer.apple.com/videos/play/wwdc2025/231/
Hi folks!! Anyone here experienced issues with video not showing up in webview?
I have a simple index.html with a video tag but its doesn't load why?
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.
The app I work on uses WKWebView to render customer data. In iPadOS 26, we observe that there is a delay when resizing the window (and thus the web view) before the content is re-rendered. The same behavior is visible in Safari.
For demonstration purposes, consider this test page: https://phet-dev.colorado.edu/html/build-an-atom/0.0.0-3/simple-text-only-test-page.html
Initially, the window is small:
Then when the window is expanded, the content scales up temporarily:
It eventually re-renders to the correct size, but then if you make the window small again, you get (temporarily):
Is there anyway around this behavior? We would love to have the content reflow interactively.
Command: com.apple.WebKit.Networking
Path: /private/preboot/Cryptexes/OS/System/Library/ExtensionKit/Extensions/NetworkingExtension.appex/com.apple.WebKit.Networking
Identifier: com.apple.WebKit.Networking
Version: ??? (8621.3.11.10.3)
Resource Coalition: "com.apple.mobilesafari"(1005)
Architecture: arm64e
Parent: launchd [1]
PID: 1708
I have some working Objective-C code that displays a WKWebView and allows printing that content. However, it uses the method -[WKWebView printOperationWithPrintInfo:], which the documentation says is deprecated as of macOS 10.15. However, it doesn't say why this method is deprecated, or what the recommended replacement is. The declaration in WKWebView.h does not even indicate that the method is deprecated. But as an alternative, I tried using +[NSPrintOperation printOperationWithView:printInfo]. Doing it that way just prints a blank page. So, should I keep doing it the doubtful way?
Hello,
We received a rejection on one of our IOS applications because we were doing Microsoft MSAL login through the user's browser. The representative recommended that we use Webview to do in-app logins. However when we tried to handle the custom app uri redirection (looking like myapp://auth/), Webview does not seem to send the user back to the application. Does anyone have a fix for this?
Thanks!
Topic:
Privacy & Security
SubTopic:
General
Tags:
Safari and Web
UI Frameworks
Authentication Services
WebKit
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
using renderInContext fetch pixel faild if subviews contains WKWebView, the code is as follows:
self.contentView = [SimpleClearContentView alloc] initWithFrame:CGRectMake(0, 100, 100, 100)];
contentView.backgroundColor = [UIColor clearColor];
self.contentView.webView = [[WKWebView alloc] init];
self.contentView.webView.frame = CGRectMake(0, 0, 50, 100);
// make web view clear bg color
self.contentView.webView.backgroundColor = [UIColor clearColor];
self.contentView.webView.scrollView.backgroundColor = [UIColor clearColor];
// webView load clear background webpage
[self.contentView.webView loadRequest:xxx];
[self.view addSubView:contentView];
// this method still return 0.0f anywhere
-(CGFloat)getPixelAlphaAtPoint:(CGPoint)point {
unsigned char pixel[4] = {0};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(pixel, 1, 1, 8, 4, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
CGContextTranslateCTM(context, -point.x, -point.y);
WKWebView *webView = self.contentView.webView;
[webView.layer renderInContext:context];
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
CGFloat alpha = pixel[3]/255.0;
return alpha;
}
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>
Can we Wrap a website in a React Native Web view and Make it live on iOS?
Here is an example code (Just a web application wrapped inside React Native )
import React, { useEffect, useRef, useState } from "react";
import { BackHandler, StyleSheet } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { WebView } from "react-native-webview";
export default function App() {
const webviewRef = useRef<WebView>(null);
const [canGoBack, setCanGoBack] = useState(false);
// Handle Android back button
useEffect(() => {
const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
if (canGoBack && webviewRef.current) {
webviewRef.current.goBack();
return true; // prevent app exit
}
return false; // allow app exit
});
return () => backHandler.remove();
}, [canGoBack]);
return (
<SafeAreaProvider>
<SafeAreaView style={styles.container} edges={["top", "bottom", "left", "right"]}>
<WebView
ref={webviewRef}
source={{ uri: "https://www.kallardo.com/" }}
style={styles.webview}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
onNavigationStateChange={(navState) => setCanGoBack(navState.canGoBack)}
/>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
webview: {
flex: 1,
},
});
I want to know will we get approval easier or makes it complicated or not allowed
Topic:
App Store Distribution & Marketing
SubTopic:
General
Tags:
App Store
App Store Connect
WebKit