I have a mind mapping app that has been running well on Android for a few years now. I have been trying to publish it for iOS and MacOS for some time now. On iOS (as an app) and MacOS (in the browser for testing) I have a problem with the export. The app is a project in Angular, Cordova, Typescript. The problem only occurs in the Safari browser, which is also used in the Cordova version for iOS. I was able to test it on my Mac and an iPhone. The error does not occur on the Mac in Chrome.
The Problem
If I export a mind map that contains images as an image (.png), the images of the nodes are not displayed in the exports. Everything else in the map is exported correctly, only the images are missing. Only when I export the map three times are the images present in the export. If I add a new image and export it again, the image is only visible in the exported image after 3 exports. It is interesting that the export as SVG, which I also offer, contains the images of the nodes. So the SVG string that I create has all the necessary information.
The base
The mind map consists of various things. HTML and CSS for the frames, lines etc... The images of the nodes are saved as Base64 and each node is in a Foreign Object.
Example of the SVG export
Mindmap with 2 nodes and the Base64 characters of the node images have been replaced with ***.
__
SVG-String.txt
Attached because otherwise too long.
This is how I export the .png file.
I can view all this content in the map view of the app. When exporting to an image, I take this information, turn it into an SVG, have the browser draw it on the canvas and then output it as a graphic. Something must be going wrong at this point.
private exportAsImage(
mindMap: MindMap,
scale?: number,
type: string = "png"
): Observable<any> {
return new Observable(o => {
this.progress.start(this.progress.PROGRESS_MAJOR);
this.mmpMap.export(this.mapVizService.getExportClassList(mindMap),
(svgStr: string) => {
this.exportService.imageFromSVGString(svgStr, type, scale).pipe(
switchMap(img =>
of(
Utils.dataURItoFileObject(
img.dataUri,
`${Utils.sanitizeFilename(mindMap.title)}.${type}`
)
)
),
switchMap((fileObject: FileObject) =>
this.mapsService.saveAsTemp(fileObject, true, {
message: this.translate.instant("mdz.mindmap.saveas.message"),
// subject: this.translate.instant("mdz.mindmap.saveas.subject"),
subject: fileObject.name,
url: `www.myURL.com`
}, true)
)
).subscribe(() => {
this.progress.stop(this.progress.PROGRESS_MAJOR);
o.next();
o.complete();
}, err => {
this.progress.stop(this.progress.PROGRESS_MAJOR);
o.error(err);
o.complete();
});
})
});
}
What I have already tried.
I have already tested various things such as time delays etc..., none of which change anything. It seems to me that it's a combination of the caching and the order or speed at which the images are loaded. Only the speed can't be, because built-in delays don't change anything.
My guess
But it must have something to do with Safari because on the Mac in Chrome it runs without problems... Maybe it can't handle so many base64 images or it exports faster than it renders? Whereby the SVG export contains all the information and when I open the SVG, all the content is also displayed in the browser in seconds. So something must happen when painting on the canvas and outputting as an image.
It doesn't really make sense, I'm really at the end of my ideas. What can you do?
I really hope you can help me. A mind mapping app without image export makes little sense. And since the app otherwise works great, I'm really getting desperate. :(
Thanks a lot!
Rob
Safari and Web
RSS for tagEnable web views and services in your apps.
Posts under Safari and Web tag
142 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
If you write about multiple lines when entering code into the prompt, it will be open, but there is no way to check the topmost written code.
It does not expose 1 to 3 lines, nor does it provide scrolling.
I think it should work like Google Chrome or there should be a way to solve this within safari.
If there's any way I don't know, please help.
I created a PWA that requires access to users' geolocation to perform a certain action in the system. The correct operation would be the user opens the application, and then the operating system prompts them to allow sharing their exact location with the PWA. However, this is not happening with a few users who have iPhone 11 or XR.
I tested it on iPhones 14, 13, 11 Pro, and even iPhone 6, and it works as expected. I directly spoke with a user who was experiencing the problem and conducted some tests.
I checked if location access was allowed in the settings.
I verified if Safari was accepting with the option to always ask selected.
In the settings of my system's website, I checked if location access was allowed with the option to always ask chosen.
We changed all prompting options to allow.
We opened the following site https://whatpwacando.today/ and found that geolocation was also not possible.
Everything indicates that the issue lies with these users' phones; however, other geolocation methods work fine, as other geolocation apps function properly. This leads me to think that it might be a problem with Safari not working properly with the HTML Geolocation API.
I'm not sure if there are any more advanced settings that could help or if anyone else has encountered this issue.
Hello,
I have noticed an issue when using my web application via TestFlight on iOS devices. When I try to print through the application, a message "This action will take you outside the app, press OK to continue" appears. This message prevents the user from printing documents from the application.
Steps to reproduce the issue:
Open my web application via TestFlight on an iOS device.
Press the print button in the application.
Expected behavior:
It is expected that the user can print documents from the web application via TestFlight without any obstacles.
Actual behavior:
When pressing the print button, a message "This action will take you outside the app, press OK to continue" appears, preventing printing.
I'm currently trying to add an OIDC connection to an iOS application. I'm using AppAuth, which will use ASWebAuthenticationSession (because we're targeting recent versions of iOS).
We have a login web page that will write a cookie. We'd like this cookie to be shared between the application (using ASWebAuthenticationSession) and the system browser (Safari) so that the user can be recognized and avoid having to log in again.
The web page writes a permanent cookie (with an expiry date) and the iOS application uses ASWebAuthenticationSession. And I did not set prefersEphemeralSession to true.
So we should be OK with the documentation (SFSafariViewController no longer shares cookies, and session cookies are not shared between ASWebAuthenticationSession and Safari).
It should work, if I understand the documentation correctly. Did I miss a point? Or is it a known problem?
I also tried to create a simple web page that read and write a cookie to do dome tests.
function writeCookie() {
var value = "something";
var maxAge = "max-age=" + (365 * 24 * 60 * 60);
var expiration = new Date();
expiration.setTime(expiration.getTime() + (365 * 24 * 60 * 60 * 1000));
var expires = "expires=" + expiration.toUTCString();
var sameSite = "SameSite=None";
var secure = ";Secure";
document.cookie = cookieName + "=" + value + ";" + maxAge + ";path=/;" + sameSite + secure;
}
function readCookie() {
var cookies = document.cookie.split(';');
var value = "";
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(cookieName) == 0) {
value = cookie.substring(cookieName.length + 1, cookie.length);
break;
}
}
if (value !== "") {
alert("Cookie value : " + value);
}
}
And iOS code:
currentAuthorizationFlow = OIDAuthState.authState(byPresenting: request, presenting: viewController) { authState, error in
if let authState = authState {
print("Authorization succeed")
self.authState = authState
if let accessToken = authState.lastTokenResponse?.accessToken, let idToken = authState.lastTokenResponse?.idToken {
completion(.success(TokenResponse(accessToken: accessToken, idToken: idToken)))
return
}
}
self.authState = nil
completion(.failure(error))
}
Hi. I plan to use a WebView in an iOS app (SWIFT) and this should run a web app with WASM and using IndexedDB for permanent credentials.
I found rumors and information on Apple deleting data in IndexedDB and localStorage after 7 days (see links below). But I found no official information that tells me if this is true for my WebView in my ordinary mobile App (not PWA).
A test cycle over a week to find out is hard to do...
Is there any reliable and clear information on this and am I affected?
Thank you!
.
Links about this topic:
https://news.ycombinator.com/item?id=28158407
https://www.reddit.com/r/javascript/comments/foqxp9/webkit_will_delete_all_local_storage_including/
https://searchengineland.com/what-safaris-7-day-cap-on-script-writeable-storage-means-for-pwa-developers-332519
hi.
I've come across a UI-related bug. It's not a critical issue, but I'm curious whether it's actually a bug or an intended result.
Enable "Dark Mode" on your device.
Set Safari to "single tab" mode in the settings.
Open the iOS browser.
Switch to "Private Browsing" mode.
When swiping up, the background of the top toolbar (including the status bar) becomes translucent, revealing the content behind it.
When I turn on the 'Reduce Transparency' setting, the issue does not occur, and the background content remains hidden as expected.
iPhone12 mini / iOS 17.0.1
thx!
Since updating to iOS v17.4.1 our safari extension no longer functions as it used to
We are experiencing issues where our content script is not getting initialized, On devices running iOS 17.4.1, the content script included in our extension does not appear to run. There are no logs from the content script in the console, whereas on other versions and devices, it operates as expected. Our Extension relies con communication between the background and content scripts in order for us to render various popups to our users, based on our logs as of iOS 17.4.1 this communication is not successful, we can see messages being sent from the background script but as mentioned above nothing on the content script side.
This behavior happens majority of the time and on random sites, sometimes opening the same site in a new tab would work but not always. There are also times where we would only receive our popups after opening the safari menu and interacting with our extension via this menu.
Please assist with a way forward
At my work we are making a React App with Tailwind CSS. ever since the new update, safari has been going dark seemingly randomly across the interface.
Has anyone else experienced this or found out what may be causing safari to do this?
I am currently developing an iOS app that needs to embed a third-party website. On this website, the best view is achieved in the standard Safari app by pressing the 'Aa' button on the left side of the address bar and setting the zoom to 50%.
I want to replicate this 50% scaling in WKWebView, but I'm not sure how to accomplish it.
I've tried using
webView.pageZoom = 0.5
and setting
webView.scrollView.minimumZoomScale = 0.5
webView.scrollView.maximumZoomScale = 0.5
but it doesn't display the same way as it does in Safari.
How can I achieve the same scaling effect in WKWebView?
Good evening, I am having problems with my WebRTC application when an iPhone or Macbook is connected. This only happens when an iPhone or Macbook is connected, as tests with Windows or Android devices have shown no issues.
As can be seen in the screenshot below, it appears that the datachannel is not initialised correctly. In fact, the webcam and microphone do not work even if permissions are given by the user, and messages and the remote webcam are not sent/shown.
If I open chrome console on Windows, this is the error I get in the console
Could you please help me investigate this problem. If you want, you can have full access to my application at https://www.fourmeet.it. I attach the functions that seem to be responsible for the problems:
const configuration = {
iceServers: [...turnServers, { urls: 'stun:stun.1und1.de:3478'}],
iceTransportPolicy: 'relay'
};
peerConection = new RTCPeerConnection(configuration);
dataChannel = peerConection.createDataChannel("chat");
peerConection.ondatachannel = (event) => {
const dataChannel = event.channel;
dataChannel.onopen = () => {
console.log("peer connection is ready to receive data channel messages");
};
dataChannel.onmessage = (event) => {
console.log("message came from data channel");
const message = JSON.parse(event.data);
ui.appendMessage(message);
};
};
peerConection.onicecandidate = (event) => {
console.log("geeting ice candidates from stun server");
if (event.candidate) {
// send our ice candidates to other peer
wss.sendDataUsingWebRTCSignaling({
connectedUserSocketId: connectedUserDetails.socketId,
type: constants.webRTCSignaling.ICE_CANDIDATE,
candidate: event.candidate,
});
}
};
peerConection.onconnectionstatechange = (event) => {
if (peerConection.connectionState === "connected") {
console.log("succesfully connected with other peer");
}
};
const stringifiedMessage = JSON.stringify(message);
if (dataChannel && dataChannel.readyState === 'open') {
dataChannel.send(stringifiedMessage);
} else {
console.log('canale non aperto');
}
};
I have a page that needs to display a large PNG image (1024 x 100247 )
Everything works fine in Chrome and Edge, but failed in safari.
this is test image :
https://storage-staging.passton.jp/images/2024/03/11/E0R6G8FKd3B3iLPO.png
is there any limit in safari ?
Since iOS 17.4 when open a camera in Safari, video stop when download popup appear and video doesn't restart expect when go to home menu and reopen Safari
This comportment wasn't present before 17.4
To Reproduce : https://zcqqjd.csb.app/
Step 1 : Click on start Camera
Step 2 : Click on Download Picture
Our app uses Azure B2C for SSO login, and we are noticing a bug on Safari 17.x (any browser on iOS 17.x, and Safari 17 on Mac OS) where the Azure B2C cookies go missing during the registration process, which leads to a broken user experience.
The following cookies are the ones that go missing
The only forum posts related to this issue I have come across are these:
https://techcommunity.microsoft.com/t5/azure/azure-app-on-ios-17-not-working/m-p/3958809
Which links to this https://techcommunity.microsoft.com/t5/intune-customer-success/day-zero-support-for-ios-ipados-17-and-macos-14/ba-p/3930010
Is this in bug that will be fixed in an upcoming release on Safari 17.x?
Dear Apple Community,
I am writing to seek assistance with a challenge I've encountered regarding the playback of WebM video format in Safari.
Despite various attempts and troubleshooting, I've been unable to successfully play WebM videos in Safari using the HTML5 video tag with provided Blob URLs. The videos, which are recorded in WebM format using browsers such as Chrome, fail to play in Safari, causing inconvenience for users who rely on this browser for their browsing needs.
I understand that Safari may have certain limitations and compatibility issues with certain multimedia formats, but as WebM gains popularity as a widely used format for web-based videos, its support in Safari would greatly enhance the browsing experience for many users.
I'm reaching out to inquire if there are any known solutions, workarounds, or plans to address this issue. Specifically, I've attempted to utilize the HTML5 video tag with Blob URLs to play WebM videos in Safari, but to no avail. If there are alternative methods or techniques that I may have overlooked, I would greatly appreciate any guidance or assistance in enabling playback of WebM videos in Safari.
Ensuring cross-browser compatibility and seamless playback of multimedia content is crucial for providing a consistent and enjoyable user experience across different platforms and environments. Any insights or recommendations from the Apple community would be immensely helpful in resolving this issue.
Thank you for your attention to this matter, and I look forward to your response.
Sincerely,
Umair Khan
Hi all,
I deployed a static site and two of my imgs are not appearing on some iPhones. It's not showing up on my iPhone 15 Pro but it's appearing on an iPhoneSE and androids. When I long click them, they actually show up in preview and can even open the images in a different tab, so they're just transparent. Does anyone have any idea why this is happening?
Application:
HTML,Javascript,Angular web Application
Issue:
In Iphone/Ipad while trying to enter English characters using Japanese keyboard in the input field
the japanese keyboard freezes and stops working after entering the first character.
Root Cause:
Two validations given in the onInput call back method causes the issue.
when the validation are removed keyboard is working fine
1.for converting lowercase letters to uppercase
2.Some Character are not allowed so they are replaced after input
Hi
I am using safari in iPad OS (17.4). when I am checking the user agent, It is showing like
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15
there is no indication that it's from iPad. How would I detect iPad from user agent whereas on IPhone it can easily be detected.
Could you please help me here?
I use three Macs for development of a web application. On each of the Macs (macOS 14.4) I used mkcert to install a local CA and to issue developer certificates (all separately). Accessing the web app with https://localhost:8080 works fine on two Macs with all browsers, but on one Mac Safari claims to have another root CA for localhost which it does not trust. And I cannot override the trust settings.
Using Keychain Access I do not find this certificate. Safari shows it like this:
Scrolling down I can see DNS Names localhost, localhost.localdomain and lvl.me, so I suspect it is a leftover from trying to install a root CA before using mkcert.
The mkcert certificate looks like this and I can see it in the System keychain:
So Safari complains and I cannot tell it to trust the server certificate as the CA does not fit (I think). Firefox and Chrome open the website just fine after warning me and me telling them to do so.
I tried to find the wrong CA using Keychain Access and Terminal (security find-certificate -a -c localhost, security find-certificate -a -c lvh...) but in vain.
Where can I find this certificate and how can I delete it?
Smart App Banner is integrated on the backend where Apple ID is used. The banner is displayed on the website when the app is publicly distributed via Appstoreconnect and available in the App Store.
The Privately distributed app has Apple ID and registered in the App Store and is distributed via client's Apple Business Management account.
Does Smart App Banner work if the app is privately distributed?