I have a UI application built with the Vue framework, using Vuetify for the UI components. There's a div with the class v-application--wrap, which is provided by Vuetify. This class internally includes the following style rule.
.v-application--wrap {
backface-visibility: hidden;
display: flex;
flex: 1 1 auto;
flex-direction: column;
max-width: 100%;
min-height: 100vh;
position: relative;
}
The pages were rendering correctly up to version 18.3, but after upgrading to version 18.4, we encountered layout issues related to height. Upon investigation, we discovered that the min-height property was no longer being interpreted or applied correctly. Replacing min-height with height resolved the issue, and the pages began loading as expected.
Any insights into why this behavior is occurring would be greatly appreciated.
General
RSS for tagExplore 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
ios26beta8 mesh不切换
Topic:
Safari & Web
SubTopic:
General
Hi,
I’m working on a Safari extension for macOS, and I’d like the app to use specific system notification settings right after installation. I’m wondering if there’s a way in Swift to programmatically configure the default notification preferences (as seen in System Settings > Notifications > [my app]).
Here are the desired settings:
Only Desktop – without “Notification Center” or “Lock Screen”
Alert Style: Temporary
Badge App Icon: Enabled
Play Sound for Notifications: Disabled
Show Previews: When Unlocked
Notification Grouping: Off (I don’t want them to accumulate in Notification Center)
Here is the code I’m currently using to display a basic notification:
private func handleNotificationRequest(_ message: [String: Any]) {
guard let title = message["title"] as? String,
let body = message["body"] as? String else {
return
}
UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, error in
if granted {
self.showNotification(title: title, body: body)
}
}
}
private func showNotification(title: String, body: String) {
let content = UNMutableNotificationContent()
content.title = title
content.body = body
content.sound = nil // No sound for subtle notification
// Create notification that doesn't persist in notification center
let trigger = UNTimeIntervalNotificationTrigger(timeInterval: 0.1, repeats: false)
let request = UNNotificationRequest(identifier: "fast-url-copy-notification", content: content, trigger: trigger)
UNUserNotificationCenter.current().add(request) { error in
if let error = error {
os_log(.error, "Failed to show notification: %@", error.localizedDescription)
}
}
}
OS: macOS 26.0
Thanks in advance,
Mateusz
Topic:
Safari & Web
SubTopic:
General
Tags:
Notification Center
User Notifications
Safari Extensions
I am encountering an intermittent issue with WKWebView in my iOS app. The problem occurs infrequently, but when it does, the WKWebView consistently displays a white screen and remains in this state until the app is forcefully terminated and relaunched.
To provide more context, here are the key characteristics of the issue:
The white screen problem occurs sporadically and is not easily reproducible.
The WKWebView remains unresponsive despite attempts to interact with it.
Reloading the webpage or navigating to a different URL does not resolve the white screen issue.
The problem persists until the app is terminated and relaunched.
This issue is specific to the WKWebView; other components of the app function correctly.
The WKWebView renders normally, and the main document synchronously loads resources both offline and online without any issues. The bridge and JavaScript execution also work as expected.
However, when interacting with the WKWebView, it becomes unresponsive to user clicks, and the web inspector fails to respond. Additionally, asynchronous network requests also do not receive any response.
The problem occurs exclusively on HTTPS pages, whereas HTTP pages load without any issues. Other components, such as workers, function correctly.
addUserScript injection during WKWebView creation is effective, and evaluateJavaScript during the page loading process works as expected. However, when the document becomes unresponsive, executing evaluateJavaScript only triggers the callback after the WKWebView is destroyed.
I have discovered a reliable method to reproduce the white screen issue in WKWebView. This method involves the following steps and conditions:
Create a WKWebView instance.
Load an HTML page using the loadRequest method(https url request).
Before the WKWebView is attached to the UI (not yet visible to the user), call the evaluateJavaScript function.
This issue has occurred in almost all iOS versions, including the latest iOS 17.x version.
In the safari or chrome app, when I want to change tabs, I can go into a grid view of the tabs. In this grid, each tab shows the content of the page. When I click on one of the tabs, the content of the page expands to fill the entire screen (and shrinks when I go back to grid).
I'm creating my own browser and I'm trying to replicate this same functionality. I'm using WebKit on XCode 16.4, iOS 18. However, I'm unable to figure out how Chrome and Safari did this.
First, I thought that I could take a snapshot of the page and then use that image as the thumbnail. However, very often the image is of the wrong size - likely due to the webview shrinking for the animation.
Making the animation wait until the image is made available did help in making it more consistent. The above errors happen whenever I spam the new tab and then click the tab grid button. It only is misaligned on the very last new tab. Please help on this.
// OpenedTab.swift
Button(action: {
tab.getThumbnail {
tabManager.selectedTab = nil
}
}) {
ZStack {
Image(systemName: "square")
.resizable()
.frame(width: 25, height: 25)
Text(tabManager.tabs.count.description)
.font(.subheadline)
}
}
// TabState.swift
func getThumbnail(completionHandler: (() -> Void)? = nil) {
webView.takeSnapshot(with: nil) { img, err in
if let err = err {
print("Snapshot err: \(err)")
} else {
self.thumbnail = img
completionHandler?()
}
}
}
Also, something I'm noticing is that for some reason, the image is slightly bigger than the header of the tab card. It also happens in the progress view if the thumbnail isn't available. The images above show it too.
I have no clue why this is happening and I would love advice on this too.
struct TabCardView: View {
@StateObject var manager = TabManager.shared
@ObservedObject var tab: TabState
var namespace: Namespace.ID
@State var width: CGFloat = 0
var body: some View {
GeometryReader { geo in
VStack(spacing: 0) {
HStack(spacing: 1) {
Text(tab.title ?? tab.url.host() ?? "")
.font(.caption2)
.padding(.horizontal, 4)
.padding(.vertical, 10)
Button(action: {
manager.close(tab: tab)
}) {
Image(systemName: "multiply")
}
}
.frame(height: 40)
.frame(width: geo.size.width)
// .padding(.horizontal, 7)
.background(.tertiary)
.matchedGeometryEffect(id: tab.id.uuidString + "title", in: namespace)
ZStack {
if let thumbnail = tab.thumbnail {
Image(uiImage: thumbnail)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width, height: 160, alignment: .top)
.clipped()
} else {
Color.black.brightness(0.8)
ProgressView()
}
}
.frame(width: geo.size.width, height: 160)
.matchedGeometryEffect(id: tab.id.uuidString + "container", in: namespace)
}
.frame(width: geo.size.width)
}
.frame(height: 200)
.clipShape(RoundedRectangle(cornerRadius: 16))
.shadow(radius: 2)
.padding(.all, 7)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(.blue, lineWidth: manager.previousTab?.id == tab.id ? 5 : 0)
)
.shadow(radius: 1)
}
}
Our UI-less share extension (com.apple.services) appears in Safari and Chrome. We raise a popup "Open in (app)..." via the Action.js script document.location.href = urlScheme://... in Safari.
However, in Chrome, while our extension executes, parses the URL item attachment from Chrome, it never triggers that popup or opens our app.
How can a UI-less share extension open our app from Chrome?
Is the accepted practice, despite guidelines, turning the com.apple.ui-services view controller invisible and auto-openURLing? Several apps on the store appear to do this, immediately popping their app without any confirmation dialog or UI in both Safari and Chrome. https://stackoverflow.com/a/79369242
Hi Team,
We are trying to upload a file or an image using the component WKWebView. How we can do it? Should we need to use another approach? Do you have any suggestion or any demo project? Thanks in advance!
Hello there,
For a video like this <video src="blob:safari-web-extension://***" autoplay="" loop="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; z-index: -1;"></video>, no matter if its local or remote, blob or mp4 files, is constantly being reloaded (refetched? revalidated?) if the loop tag is added. I can confirm there is actual constant traffic from the server based on my server logs. I am running iOS/macOS 26.
Hello,
When I view my website (lasaluade) on iphone or ipad the top of my page bodies are cut off (3-4 first lines). However, on PC, Mac or Android everything is OK (see screenshots).
For the record, I built this site with Wordpress and Divi Builder, and I've the same result on Safari and Chrome.
Not being a developer, I don't know where to look (I just think it's iOS-related).
Have you already had this problem? Do you have any ideas?
Thanks for your help!
Topic:
Safari & Web
SubTopic:
General
When practicing a post request today I forgot to use the setvalue method. Why is this method important and needed for a post request? Don't we just encode the data to JSON and put that as the httpbody and make the request
I built a web application using the Apple Pay on the Web Interactive Demo with the Payment Request API, but encountered a few issues:
The initiated web Apple Pay interface shows a spinning circle at the bottom and cannot proceed with payment(Bottom display:正在处理). What could be causing this?
How to set up sandbox testing for payments?
How to asynchronously and synchronously retrieve payment results (backend code to fetch payment results)? The demo only shows frontend code using await response.complete("success"); for retrieving payment results
my demo URL: https://shop.wowseer.com/rsolomakhin/pr/applepay/
The extension popups don't seem to support the dark mode media query.
The only way the query gets detected is when a color-scheme is added:
<meta name="color-scheme"content="light dark">
SwiftUI List Accessibility VoiceOver
Topic:
Safari & Web
SubTopic:
General
How did you test apple-app-site-association in non-production environments that are usually not public?
Topic:
Safari & Web
SubTopic:
General
Hi,
when I display an HTML page with a on Safari iOS, I get a nice UI. Great! At the first look I see a video frame with an arrow-in-a-circle button in the middle. Very nice. I click on the arrow and I get a fullscreen view while the video begins to play. I watch the video then I pause it then I click on the top-left x button. So I go back to my html page and the video is perfectly there as it was before.
But, there is an annoying new detail. The video frame is really dark, it still presents all the controls and a "different" arrow button to play it again. In other words that nice video-frame, that nice picture, is not longer visible on the page. That nice page with nice pictures has now an almost-black rectangle. Too bad.
Sure I can click on the video (outside the controls) then the controls and the black overlaying frame disappear. I can see that nice picture again. Finally. Well, but the arrow-in-a-circle button to play the video disappeared. Now the user cannot longer understand that's a video to play. It looks just like any other pictures to admire statically.
Is any way to get the previous first look of the video? The one clear, with the current frame and the arrow-in-a-circle look?
Hey everyone,
After installing iOS 26 beta, I started noticing unexpected behavior in our input event handlers.
Specifically, when users type into an field, event.target.value is always an empty string — but only when the JS file is loaded from a specific domain (e.g., t1.daumcdn.net). The exact same code works perfectly when hosted on other domains like t2.daumcdn.net or search1.daumcdn.net.
👉 I created a demo here:
🔗 https://codepen.io/bzasklcu-the-sans/pen/rNXogxL
The scripts loaded from each domain are 100% identical (apart from the top-level selector). Before iOS 26 beta, this worked fine.
I suspect this is related to ITP or some new cross-origin behavior in Safari, but I’d love to know if anyone else is running into this — or if someone knows a workaround.
Thanks!
When a DNR rule is set for a specific URL and the request receives a server-side redirect (e.g., 302) to a different URL that does not match the urlFilter, the rule still seems to apply to the redirected request. We are using macOS 15.4 and Safari 18.4.
For example, consider two sequential calls: call1 and call2.
call1 triggers a 302 redirect to call2.
A DNR rule is created to add a "Cookie" header to call1 based on its URL.
Unexpectedly, the same cookie is also added to call2, even though call2's URL does not match the rule's urlFilter.
This results in the Set-Cookie response from call1 being ignored, and call2 receiving the manually set cookie instead—leading to incorrect behavior.
This issue doesn't occur in Chrome or Firefox, where the rule is not applied to the redirected request if the URL no longer matches.
We are looking for assistance in fixing these issues and having our Safari Extension function the same as it does in Firefox and Chrome.
In our web application some functionalities will allow user to upload multiple images (More than 25 images) in a single page
It is working find in all OS and browsers except iOS
When user try to upload images directly from camera there will be some overlaps, duplication, missing etc.
This is happening in both Safari and Chrome, we had a thorough check in our application and found every thing is working fine from our end
You can reproduce the issue by creating a web page which accept more than 50 images (we tried the same in ASP MVC Core & PHP) and showing the images in order
access the page through your iPhone using Safari or Chrome
Try to upload images directly from your camera, try sequential images (Image of a stop watch, or some thing like that) so that you can easily identify the order of files uploaded
and check the listing page of uploaded image (Try these steps multiple times)
You can find some images are duplicated and some are missing
We would like to confirm the unsubscribe flow related to recurring payment processing.
When a user unsubscribes, does your system send any notification to us?
If no notification is provided, we will not be able to detect the unsubscribe event and will continue to send recurring payment requests to the gateway periodically. Would this cause any issues?
We would appreciate it if you could share the specific unsubscribe flow with us.
Thank you in advance for your support.
I develop a tab manager extension: https://apps.apple.com/ua/app/tab-finder-for-safari/id6741719894
It's written purely in Swift. All Safari interactions are done solely inside a SFSafariExtensionHandler .
But now i'm considering adding some features from Google Chrome's Extension API like window switching.
Is it possible to add a background.js worker to my existing Safari App Extension to have access to the beginRequest method override inside SFSafariExtensionHandler?
Without converting my extension from Safari App Extension to Safari Web Extenion?