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.
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
Hi all ,
I have 2 questions regaridng App Clips.
1 - can we directly invoke App Clips from a HTML Appclip experience url ?
We want to directly take users to the App Clips flow without showing App Clips cards or banner.
2 - Does Apple have a plan to support other modern mobile browsers such as Chrome , Edge and Firefox ?
Hi all,
Managing Safari usage in an enterprise environment and I’m looking for ways to disable or restrict the QUIC protocol to enforce network-level security policies (e.g., content filtering).
Does Safari offer any settings to disable QUIC, or is there a known workaround to prevent Safari from using it?
Appreciate any insights or guidance.
Topic:
Safari & Web
SubTopic:
General
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
Summary:
Content scripts injected via manifest continue to receive and respond to chrome.tabs.sendMessage() calls even after the user has navigated away from the original page, causing messages intended for the current tab to be handled by zombie contexts from previous pages.
Environment:
Safari/iOS Version: 18.5
Extension Manifest: Version 3
Expected Behavior:
When a user navigates from Page A to Page B:
Page A's content script context should be destroyed.
chrome.tabs.sendMessage(currentTabId, message) should only reach Page B's content script
Only Page B should be able to respond to action button clicks (or other background to content messages).
Actual Behavior:
When navigating from Page A to Page B:
Page A's content script context persists as a "zombie".
chrome.tabs.sendMessage(currentTabId, message) reaches zombie context instead of the Page B's one. Hence, it looks like the extension is broken because the content script does not respond to the background messages.
Details:
Tab ids are properly recognized by both background and content script
The problem does not always occur; it occurs on random occasions. It's quite easy to have it reproduced.
It can be reproduced easier if user clicks ext icon during site loading (before it fully loaded), triggering ActionClick (ext icon click) event and then sending a msg upon it to the content script
Regardless of whether the content script is injected into the tab using manifest.json, registerContentScripts, or executeScript, the problem is still there
Once the problem occurs, e.g. user is on macys.com but zombie injected content script believes it's google.com (a previous page), even refreshing the tab doesnt change anything - zombie context is still there (thinking it's still google.com) . Changing a domain to something completely different one could help though. Then going back to macys.com could still lead to the described issue.
A zombie content script does not have access to the page's console function and others.
Example communication
Sending following message from the background to the content script using chrome.tabs.sendMessage()
{
"tab": {
"id": 155,
"active": true,
"url": "https://www.macys.com/",
"title": "Macys.com"
}
}
Results in the content-script zombie context response (the url is taken from the window.location.href)
"message": {
"type": "ActionClicked",
"data": {}
},
"response": {
"data": {
"windowUrl": "https://www.google.com/",
"contentReached": true,
"timestamp": "1,753,138,945,272",
}
}
}
I'm encountering an issue with front camera video recordings via browser (Safari/Chrome) on devices running iOS/iPadOS 18 and above:
On iPad, the recorded video appears upside down.
On iPhone, the recorded video is rotated 90 degrees.
The rear camera functions correctly without orientation issues.
This problem seems specific to browser-based recordings, as the native Camera app records videos with the correct orientation.
Has anyone else experienced this behavior? Is there a known workaround or fix?
The preview while recording is fine, the recorded video is oriented incorrectly.
Our team has implemented a video player using the HTML5 tag, but we have identified an issue with loading media files.
While Safari on iOS 18.0 downloads each TS file listed in the m3u8 playlist correctly, on iOS 18.4 and 18.5, a single TS file is downloaded repeatedly.
Our statistics indicate that approximately six requests are made per second for the same TS file.
Is this intended behavior?
If not, are there any known workaround or solutions?
If this issue is due to the OS or browser, are there any plans to address it in iOS 18.6 or a future release?
Could you advise on the proper channel to submit a bug report for this issue?
Similar issues have been reported in the past with WKWebView.
The previous thread is here:
https://developer.apple.com/forums/thread/784134
Topic:
Safari & Web
SubTopic:
General
Hi everyone,
We’ve recently run into an issue with Apple Pay on the web and would appreciate some clarification.
Background:
Previously, we integrated Apple Pay without using the Apple Pay JS SDK.
We relied on ApplePaySession.canMakePayments() to check availability, and it worked fine.
After Apple announced support for browsers beyond Safari, we switched to the Apple Pay JS SDK.
According to Apple’s documentation, we should now use applePayCapabilities() for capability checks in third-party browsers.
Our current behavior:
We implemented applePayCapabilities().
Initially, it was returning either paymentCredentialStatusUnknown or paymentCredentialsUnavailable.
Based on those values, we displayed the Apple Pay button.
The problem:
About a week ago, on the same device/browser, applePayCapabilities() started returning applePayUnsupported.
Setup: MacBook Pro 13-inch (M1, 2020), Google Chrome Version 136.0.7103.93.
The Apple documentation says: “Don’t show an Apple Pay button or offer Apple Pay” when the result is applePayUnsupported.
However, at the same time, canMakePayments() is returning true.
This creates a direct conflict between the two recommendations:
canMakePayments() → true ⇒ show the button.
applePayCapabilities() → applePayUnsupported ⇒ don’t show the button.
Question:
What’s the correct approach here?
Should we prioritize applePayCapabilities() and hide the button, or is it acceptable to continue relying only on canMakePayments() as the source of truth for showing Apple Pay?
Any insights from others who’ve run into this contradiction would be very helpful.
Thanks in advance!
We are encountering an issue where the Safari extension we are developing stops working while in use on relatively new iOS versions (confirmed on 17.5.1, 17.6.1, and 18). Upon checking the Safari console, the content script is displayed in the extension script, so the background script or Service Worker must be stopping. The time until it stops is about 1 minute on 17.5.1 and about one day on 17.6.1 or 18.
When it stops, we would like to find a way to restart the Service Worker from the extension side, but we have not found a method to do so yet. To restart the extension, the user needs to turn off the corresponding extension in the iPhone settings and then turn it back on.
As mentioned in the following thread, it is written that the above bug was fixed in 17.6, but we recognize that it has not been fixed. https://forums.developer.apple.com/forums/thread/758346
On 17.5.1, adding the following process to the background script prevents it from stopping for about the same time as on 17.6 and above.
// Will be passed into runtime.onConnect for processes that are listening for the connection event
const INTERNAL_STAYALIVE_PORT = "port.connect";
// Try wake up every 9S
const INTERVAL_WAKE_UP = 9000;
// Alive port
var alivePort = null;
// Call the function at SW(service worker) start
StayAlive();
async function StayAlive() {
var wakeup = setInterval(() => {
if (alivePort == null) {
alivePort = browser.runtime.connect({ name: INTERNAL_STAYALIVE_PORT });
alivePort.onDisconnect.addListener((p) => {
alivePort = null;
});
}
if (alivePort) {
alivePort.postMessage({ content: "ping" });
}
}, INTERVAL_WAKE_UP);
}
Additionally, we considered methods to revive the Service Worker when it stops, which are listed below. None of the methods listed below resolved the issue.
①
Implemented a process to create a connection again if the return value of sendMessage is null. The determination of whether the Service Worker has stopped is made by sending a message from the content script to the background script and checking whether the message return value is null as follows.
sendMessageToBackground.js
let infoFromBackground = await browser.runtime.sendMessage(sendParam);
if (!infoFromBackground) {
// If infoFromBackground is null, Service Worker should have stopped.
browser.runtime.connect({name: 'reconnect'}); // ← reconnection process
// Sending message again
infoFromBackground = await browser.runtime.sendMessage(sendParam);
}
return infoFromBackground.message;
Background script
browser.runtime.onConnect.addListener((port) => {
if (port.name !== 'reconnect') return;
port.onMessage.addListener(async (request, sender, sendResponse) => {
sendResponse({
response: "response form background",
message: "reconnect.",
});
});
②
Verified whether the service worker could be restarted by regenerating Background.js and content.js.
sendMessageToBackground.js
export async function sendMessageToBackground(sendParam) {
let infoFromBackground = await browser.runtime.sendMessage(sendParam);
if (!infoFromBackground) {
executeContentScript(); // ← executeScript
infoFromBackground = await browser.runtime.sendMessage(sendParam);
}
return infoFromBackground.message;
}
async function executeContentScript() {
browser.webNavigation.onDOMContentLoaded.addListener((details) => {
browser.scripting.executeScript({
target: { tabId: details.tabId },
files: ["./content.js"]
});
});
}
However, browser.webNavigation.onDOMContentLoaded.addListener was not executed due to the following error.
@webkit-masked-url://hidden/:2:58295
@webkit-masked-url://hidden/:2:58539
@webkit-masked-url://hidden/:2:58539
③
Verify that ServiceWorker restarts by updating ContentScripts
async function updateContentScripts() {
try {
const scripts = await browser.scripting.getRegisteredContentScripts();
const scriptIds = scripts.map(script => script.id);
await browser.scripting.updateContentScripts(scriptIds);//update content
} catch (e) {
await errorLogger(e.stack);
}
}
However, scripting.getRegisteredContentScripts was not executed due to the same error as in 2.
@webkit-masked-url://hidden/:2:58359
@webkit-masked-url://hidden/:2:58456
@webkit-masked-url://hidden/:2:58456
@webkit-masked-url://hidden/:2:58549
@webkit-masked-url://hidden/:2:58549
These are the methods we have considered. If anyone knows a solution, please let us know.
It‘s called Track Configuration API found in the iOS 26.0 Public Beta 5. No explanation anywhere on the web Or release notes, it’s not mentioned anywhere. I‘m very interested in new tracking innovations.
And another small thing I‘ve never found out, what is „fingerprint related quirk“ is that an insider joke Or something? I don‘t know it‘s actions.
Thank you for answering
Subject: Help Needed with App Clip Implementation
Hi Team,
I need some assistance with implementing App Clip behavior in safari and also experimenting using TestFlight app.
Default App Clip URL:
https://appclip.apple.com/id?p=com.jey.ppclient-prod.appclip
Website for App Clip Integration:
https://appclip-sand.vercel.app/customer
Current Behavior:
Default App Clip URL:
When I embed the default App Clip URL in an HTML tag like below:
Launch App Clip
it does launch the App Clip. but it says the appclip not supported in your region
I've already added this configuration under Local Experience in App Store Connect.
Website Integration:
I’ve registered the site using the Advanced App Clip Experience.
The apple-app-site-association file is in place.
When I visit the site, the App Clip does launch as expected.
What I Need Help With:
I want to launch the App Clip from a custom button click, using either:
The default App Clip URL, or
The website URL (e.g., https://appclip-sand.vercel.app/customer) with additional query parameters like userId or sessionId.
Is there a supported way to achieve this—perhaps through JavaScript or a specific tag setup that works with either Local or Advanced Experience?
Your guidance would be greatly appreciated.
Thanks,
Jey
(Error) When using Safari to access an internal website during development (using a self-signed certificate), may encounter issues where backend data fails to be retrieved.
Topic:
Safari & Web
SubTopic:
General
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
Calling SFContentBlockerManager.reloadContentBlocker from related App extension intermittently fails
I have an app which has at least two extensions:
A Content Blocker extension with a request handler that returns an appropriate NSExtensionItem as part of beginRequest. A different file URL is returned depending upon if the content blocking is on or off by a user setting
A Safari Web Extension that includes a toolbar button and popover that enables users to enable or disable the ad blocking of the content blocker extension
All three targets (App, Content Blocker appex and Web Extension appex) use an App Group default to read and set the on or off status of the content blocking.
When the user changes the content blocking status, the app group default is updated and SFContentBlockerManager.reloadContentBlocker(...) is called.
The Content Blocker extension reads the default and then returns the appropriate file URL.
The issue is, I have noticed that whenever SFContentBlockerManager.reloadContentBlocker(...) is called from the app, Safari always applies the correct rules from the returned file URL.
However sometimes when SFContentBlockerManager.reloadContentBlocker(...) is called from the Safari Web Extension using native messaging, Safari does NOT apply the correct rules from the returned file URL.
Using logging I have confirmed that the Content Blocker extension always returns the appropriate file URL irrespective if called as a result of the app or the web extension.
Despite this, Safari does not seem to always apply the returned file URL rules when it is called from the Safari Web Extension appex. In these cases, quitting Safari and relaunching it seems to make it apply the rules correctly (obviously this is applying it due to its launch state, not due to the Web extension appex asking it to do so at that point).
All targets have access to the App Group location where the active content blocking file URL belongs and the inactive content blocking file URL is within the Safari content blocker target as a resource.
I don't think this is a memory status issue as I cannot see the Content Blocker extension being killed when it returns complex rules --- the fact it always works when called via the app also seems to rule this possibility out.
This brings up a number of questions:
Is calling SFContentBlockerManager.reloadContentBlocker(...) from a different appex, of the same app target and app group supported? (it seems to work sometimes and did work in previous versions of the app).
Is there an issue that the Content Blocker extension sometimes returns a file URL that perhaps the calling Web Extension appex may not have access to (even though Safari should via the Content Blocker extension)?
Any other ideas of why this may not be working correctly?
Has anyone else experienced this?
It seems to happen on both iOS and macOS Safari using the same codebase.
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)
}
}
Hi i Need help, my phone keeps getting all these updates and rapid security features on it at first I thought it was just the normal updates but i started to pay more attention and it's not. i have the beta updates on my phone iPad and Apple Watch but when I go in to see if it in my updates like apple said to do it wasn't in there. Also all my apps are developer apps I'm not able to get normal ones and if I can the next time I go on it it's not how it was. I really don't know what to do, I've gotten 2 new phones because I thought it was just bad software but I researched a lot and I think someone it hacking me. everytime I look something up on safari it takes me to a whole other website or its completly altered and doesnt look like it usually does. Someone please help me lmao I actually think I'm going to lose my mind.
Topic:
Safari & Web
SubTopic:
General
Doc URL: https://developer.apple.com/documentation/applepayontheweb/requesting-an-apple-pay-payment-session
How can I send a POST request using PHP, and what certificates are required?
Currently, I have downloaded the following files on the backend: merchant_id.cer, apple_pay.cer, and a local cert.p12 file
This my code:
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
We use a direct link mechanism in our app that attempts to open the app if it's already installed; otherwise, it redirects the user to the App Store.
However, when the app is not installed, Safari displays an alert saying:
"Safari cannot open the page because the address is invalid."
This popup appears to be caused by attempting to open a custom URL scheme that doesn't resolve.
what is the recommendation from apple to have a smooth transition to our mobile App
Here’s a sample link we’re using:
https://new.oneclear.com/Asset/fe5f7fb6-205a-40f8-9efe-71678361aa2c?t=NTA0NQ==
My website ccflood.us is a simple map that uses a CSV file for the data that is displayed on the map. It uses the ESRI JS API.
Recently the points on the map began missing the text in the boxes only on Apple devices that have been upgraded to iOS 18.
Has anyone also had this happen to their site? If you have upgraded to iOS 18, try this site on your iPhone then look at it on an Android phone or your desktop browser. You should seet the values in the boxes and a "+" at points that have no value.
If you've had this happen with your site or have heard of a fix, please reply to this post.
Topic:
Safari & Web
SubTopic:
General