【現象】
Safariブラウザでcanvasに対して任意の描画をした後、clearRect()を実行します。
その後、canvasの親divに対して visibility: hidden を設定すると、消したはずの描画が復活します。
但し、親divは正常に visibility: hidden が働いているので描画されなくなります。
また、この現象はブラウザの拡大率が影響をしているようです。
少なくとも後述のリスト内のMacbookAirでは、拡大率が100%の場合にのみ発生しています。
この現象は過去のバージョンでは起きてないようです。
このバグを修正する予定はありますか？
【機種】
機種は以下のリストを確認してください。
Model
OS&Version
Y/N
version
MacbookAir M2 2022
macOS Sonoma 14.4.1
y
17.4.1
Mac Studio 2022 Apple M1 Max
macOS Monterey 12.5
n
16.0
MacBook Air M1 2020
macOS Sonoma 14.3.1
n
17.3.1
iPadPro gen6
iPadOS 17.4.1
y
-
iPad gen10
iPadOS 17.4.1
n
-
【デモ】
現象を確認するためのデモは以下のHTMLファイルを保存してブラウザで開いてください。
再現手順はボタンを draw -> clear -> hide の順番に押してください。
黄色の親divが非表示になるのに対し、canvasからclearしたはずの黒い四角が表示されます。
<html>
<body onload="onLoad()">
<div id="parent" style="background-color: yellow;">
<canvas id="canvas"></canvas>
</div>
<button onclick="drawCanvas()">draw</button>
<button onclick="clearCanvas()">clear</button>
<button onclick="showCanvas()">show</button>
<button onclick="hideCanvas()">hide</button>
<script>
let parent
let canvas
let context2d
function onLoad() {
parent = document.getElementById("parent")
canvas = document.getElementById("canvas")
context2d = canvas.getContext('2d')
}
function drawCanvas() {
context2d.fillRect(0, 0, 100, 100)
}
function clearCanvas() {
context2d.clearRect(0, 0, canvas.width, canvas.height)
}
function showCanvas() {
parent.style.visibility = "visible"
}
function hideCanvas() {
parent.style.visibility = "hidden"
}
</script>
</body>
</html>
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.
Post
Replies
Boosts
Views
Activity
We are requesting some information on what should be done in the following case:
We have an application that has a privacy manifest, where tracking domains are listed. When the user does not give his/her consent to be tracked, non tracking domains are being used for requests to bring ads.
The application in question has a webview where content (ads) are loaded. When a user clicks on an ad, another webview is opened, and this webview does not know that it is in a non tracking flow. Therefore, tracking domains are being used instead of non tracking domains.
Since multiple redirections might be in play, there is no way to pass data from the original webview to the one that is opened once the ad is clicked.
Would the tracking domains being used in the second webview be blocked?
If so, what can we do to circumvent this scenario?
Is this even a use case considering privacy manifest?
Thanks
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
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.
Steps to reproduce the problem:
Have an extension which has a content_scripts section in its manifest that specifies a content script for some URLs.
Open a tab at a URL that the extension should inject a content script in.
What is the expected behaviour?
The content script should execute on the page, and if you open the Developer Tools and go to the Console tab, then the extension should be listed inside of the "Extension Scripts" dropdown (the dropdown immediately to the right of the "Clear console" button).
What went wrong?
After prolonged inactivity, sometimes the content script doesn't show up in the Extension Scripts dropdown (which it would if it were executing). There's no evidence in the page's Developer Tools that the extension is active. It doesn't execute at all, there's no messages in the console related to it or its non-execution, and its content scripts don't show up in the Sources tab of Developer Tools.
When the issue happens, the extension still shows up in the browser toolbar as an option.. The extension's icon shows up and functions normally. The extension background page is inspectable and seems to be running normally. Refreshing the webpage doesn't fix it. But once we open the ios App it starts working again.
Safari version: 74
OS Version: OS X 10.14.5
I want to implement in-app purchases for my Mac Safari web extension.
I can think of two ways:
Draw the payment UI in an extension web page, and send a message to the native extension app to call StoreKit code.
Open the container app from an extension web page, where the app draws the payment UI.
I couldn't make #1 work with either
StoreKit 2, which is async, and context.completeRequest(returningItems:) doesn't want to be called in a Task, saying context is not sendable)
or StoreKit 1, where calling context.completeRequest(returningItems:) in paymentQueue(_:updatedTransactions:) for some reason doesn't return a response to the extension's web page.
I couldn't make #2 work because I couldn't find a way to open the container app from the web extension. I registered a custom URL for my container app, but context.open that url does nothing.
Web extensions that use IAP with #2 are available on the Mac app store, so it must be possible, could anyone shed some light on how to open the container app and pass the purchased info to the extension web page even if the container app is not open?
Thanks in advance.
I have the following html that is opened in a WKWebView.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup Window Test</title>
</head>
<body>
<textarea id="myTextarea" cols="5" rows="1">Empty</textarea>
<script>
function openWindow() {
const popup = window.open(
"https://www.apple.com/",
"PopupSample",
"width=400,height=400,dialog=yes,dependent=yes,scrollbars=yes,location=yes"
);
console.log("Popup closed: ", popup.closed);
document.getElementById("myTextarea").value = popup.closed
? "Closed"
: "Open";
const timer = setInterval(() => {
console.log(popup.location.href);
if (popup.closed) {
clearInterval(timer);
console.log("Popup closed: ", popup.closed);
document.getElementById("myTextarea").value = "Closed";
}
}, 1000);
}
</script>
<button onclick="openWindow()">Open Window</button>
</body>
</html>
When I click the button and open page "https://www.apple.com/" in another WKWebView, the javascript code does not work as expected here, the popup object returned from window.open() does not refer to the valid window object, and the closed property is set to true even the new popup window is still alive.
This is a regression since MacOS14.4 updated, I've reported to apple DTS, but they said it's out of their scope.
Does anyone has any clue about this?
- (void)viewDidLoad {
[super viewDidLoad];
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(rightButtonTapped:)];
self.navigationItem.rightBarButtonItem = rightButton;
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
_webView.navigationDelegate = self;
[self.view addSubview:_webView];
NSURL *url = [NSURL URLWithString:@"https://www.apple.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[_webView loadRequest:request];
}
- (void)rightButtonTapped:(UIBarButtonItem *)sender {
NSLog(@"self.webView.scrollView.contentSize.height:%f", self.webView.scrollView.contentSize.height);
WKSnapshotConfiguration* configuration = [WKSnapshotConfiguration new];
configuration.rect = CGRectMake(0, 0, self.webView.scrollView.contentSize.width, self.webView.scrollView.contentSize.height);
// configuration.afterScreenUpdates = NO;
[self.webView takeSnapshotWithConfiguration:configuration completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
if (error) {
NSLog(@"fail");
} else {
NSLog(@"succ");
}
}];
}
Running the code above, I get a blank image
[WKWebView dealloc]
WebKit::WebURLSchemeTask::stop() - crash
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?
Hi Apple Team,
We have a PWA which supports downloading and playback for audio and video content. Downloaded content is stored in IndexedDB in the form of blobs and blob URLs are generated on runtime through which content is played.
We have observed that the blob URLs have stopped working on iOS 17.4.1. They work on iOS 17.4 and iOS 17.3 as well.
This feature is very critical for us as it is the heart of the offline mode of the app.
Thanks!
I've been having a hard time getting WebXR testing working in VisionOS. I had Ventura and installed VisionOS 1.0 and video crashed launching to WebXR. To get 1.1 I did alot of jumps to get XCode 15.3 beta and VisionOS 1.1 requiring to also upgrade to macOS Sonoma.
In Ventura I was able to web inspect Safari in VisionOS 1.0 but in Sonoma, and VisionOS 1.1 I get "No Inspectable Applications"
I have tried Safari and Preview Safari.
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.
Input number always on the bottom for some reason. it's on display flex and before ios 17.4 it worked fine.
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))
}
I am trying to find an Apple reference document on the Safari support lifecycle. I have found a wikipedia article that seems to do this here (https://en.wikipedia.org/wiki/Safari_(web_browser)#Version_compatibility) but I have been unable to find an official Apple document / reference on the Apple site. Does Apple have such a policy defined? How many versions of Safari are supported by Apple? Can a link be shared to some documentation on the support policy and how to check the status? Thanks.
Hello,
I'm creating a pluggin fin javascript in an app called obsidian.
I'm using navigator.clipboard.read():
Everything work fine in MacOS for both text and images
on iOS it works for text but if the clipboard is an image the script just stop
Totally stuck, please help
My safari plugin login verification is based on cookies. I found that as long as the plugin is used for a period of time, refreshing the page and making another request will result in the loss of cookies. I want to know if there are any other ways besides changing the login verification method to bypass cookies?
As part of a university project, we need to be able to display a website on an Apple Watch and log in to a service. Is it possible to get access to the WebKit framework in a watchOS app? We also need to be able to execute JavaScripts in the browser so that the login process works.
I have an HTTP3 relay setup and I'm trying to get WKWebView traffic to use it. The relay has a self-signed certificate for TLS traffic.
When using URLSession to make a call, everything works as expected, but in WKWebView, it doesn't.
Here is how I setup my ProxyConfiguration
let options = NWProtocolTLS.Options()
// sample options to trust any certificate for testing
sec_protocol_options_set_verify_block(options.securityProtocolOptions, { (sec_protocol_metadata, sec_trust, sec_protocol_verify_complete) in
sec_protocol_verify_complete(true)
}, DispatchQueue.global())
let relayServer = ProxyConfiguration.RelayHop(http3RelayEndpoint: relayEndpoint, tlsOptions: options)
let relayConfig = ProxyConfiguration(relayHops: [relayServer])
I connect that to my webview by simply doing the following:
let configuration = WKWebViewConfiguration()
configuration.websiteDataStore = WKWebsiteDataStore.nonPersistent()
configuration.websiteDataStore.proxyConfigurations = [relayConfig]
let webView = WKWebView(frame: .zero, configuration: configuration)
The sec_protocol_options_set_verify_block is never called for the WKWebView (it is when I use URLSession)
I get the following error in XCode
[pageProxyID=7, webPageID=8, PID=73105] WebPageProxy::didFailProvisionalLoadForFrame: frameID=1, isMainFrame=1, domain=NSURLErrorDomain, code=-1202, isMainFrame=1, willInternallyHandleFailure=0
Is there some API I am missing to get the webview to do custom TLS validation with an HTTP3 relay?