I have a homepage with an iframe containing my app LocalStorage,
but when opening my app page the LocalStorage is lost.
structuration of the page:
homepage : domain.com
iframe and app : app.domain.com
the localstorage is set up directly within the iframe and postmessage between iframe and parent works.
We see in the parent page that the LocalStorage for the sub-domain is set but opening the sub-domain on a new window it disappears :
The problem is detected On Safari 18 only.
Explore 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
Hi, I am building a Next.js app on top of Mapkit JS but I keep getting this error randomly. The map works most of the time but this error triggers randomly sometimes when the map loads even though I have not used the fillOpacity parameter at all. Even defining the parameter still causes the error.
mapkit.js:2 Uncaught TypeError: [MapKit] Expected a number value for Style.fillOpacity, but got NaN instead.
at Object.checkType (mapkit.js:2:205350)
at set fillOpacity (mapkit.js:2:670243)
at set fillOpacity (mapkit.js:2:673537)
at _.performScheduledUpdate (mapkit.js:2:643649)
at mapkit.js:2:221322
at m (mapkit.js:2:221358)
Code:
import React, { useEffect, useRef } from "react"
import { useTheme } from "next-themes"
declare global {
interface Window {
mapkit: any
}
}
interface MapKitProps {
latitude: number
longitude: number
zoom: number
}
const MapKit: React.FC = ({ latitude, longitude, zoom }) => {
const mapRef = useRef(null)
const mapInstanceRef = useRef(null)
const { setTheme, theme } = useTheme()
useEffect(() => {
if (window.mapkit && mapRef.current) {
window.mapkit.init({
authorizationCallback: (done: (token: string) => void) => {
const token = process.env.NEXT_PUBLIC_APPLE_MAPKIT_TOKEN
if (token) {
done(token)
} else {
console.error("MapKit JS token is not set")
}
},
})
// Clean up the previous map instance if it exists
if (mapInstanceRef.current) {
mapInstanceRef.current.destroy()
}
// Create a new map instance
mapInstanceRef.current = new window.mapkit.Map(mapRef.current, {
center: new window.mapkit.Coordinate(latitude, longitude),
zoom: zoom,
colorScheme: theme,
_allowWheelToZoom: true,
})
}
// Cleanup function to destroy the map instance when the component unmounts
return () => {
if (mapInstanceRef.current) {
mapInstanceRef.current.destroy()
}
}
}, [latitude, longitude, zoom])
return <div ref={mapRef} style={{ width: "100%", height: "100%" }} />
}
export default MapKit
If you create a cookie and add to the WKWebViewConfiguration the completionHandler returns 'Cookies synced' suggesting cookie was added with success. However, upon inspection of app in Safari the cookie is not there. This is broken in iOS 18 beta and works in previous versions without issue. Did Apple change the WKWebView API and break this feature?
code snippet:
NSDictionary* settings = self.commandDelegate.settings;
WKWebViewConfiguration* configuration = [self createConfigurationFromSettings:settings];
configuration.userContentController = userContentController;
NSMutableDictionary *cookieProperties = [NSMutableDictionary dictionary];
[cookieProperties setObject:@"foo" forKey:NSHTTPCookieName];
[cookieProperties setObject:@"bar" forKey:NSHTTPCookieValue];
[cookieProperties setObject:@"mydomain.com" forKey:NSHTTPCookieDomain];
[cookieProperties setObject:@"mydomain.com" forKey:NSHTTPCookieOriginURL];
[cookieProperties setObject:@"/" forKey:NSHTTPCookiePath];
NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:cookieProperties];
[configuration.websiteDataStore.httpCookieStore setCookie:cookie completionHandler:^{NSLog(@"Cookies synced");}];
WKWebView* wkWebView = [[WKWebView alloc] initWithFrame:self.engineWebView.frame configuration:configuration];
I wrote a code like the example below to execute javascript code that has no return value.
let webView: WKWebView
// after load complete
let result = await webView.evaluateJavascript("someFunction()") // :0: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value
but when i use method with completion handler manner, it doesn't be crashed. but Xcode enforces me to use 'await' keyword and warning is bordering me
await webView.evaluateJavaScript("someFunction()", completionHandler: nil) // warning: Consider using asynchronous alternative function
The differnce I found is the different signature. Completion handler version has Optional result type, but async/await version has just Any result type
func evaluateJavaScript(_ javaScriptString: String,
completionHandler: ((Any?, Error?) -> Void)? = nil)
func evaluateJavaScript(_ javaScriptString: String) async throws -> Any
my Xcode version is 13.2.1. Hope to fix it soon.
Good day,
I want to create application wallet for Zero currency, there is already web page for this :
https://zerochain.info/mob-wallet
Is it possible to convert it into application in a simple way?
Thanks for your time!
Regards
I have a hybrid mobile app which loads web server screens in its iframe(which is under the WKWebView); an https request is initiated from the mobile app to the web server which returns the html page to be loaded in the iframe.
The calls which are initiated from outside the iframe have cookies maintained in their requests, while the ones initiated from inside the iframe(web server page) loose the cookies and do not inherit them in IOS beta 18 while It worked fine in the previous IOS versions.
Anybody has infos about this or similar cases?
We are using declarativeNetRequest.getMatchedRules() to get the matched rules' URLs. When user switches website in the same tab, it returns URLs which were blocked in the previous website also, within past 5 minutes.
Is it possible to fetch getMatchedRules() only for current webpage in the same tab?
I need to play a Video with transparent background on our website.
It works perfectly on Windows, Mac & Android (in all browsers).
On iPhone however, no matter what Browser, The transparent parts of the video act almost like an "overlay", making everything behind it a lot brighter. This effect gets worse, the higher I set the iPhone screen brightness. This is of course not the behavior I'm looking for.
The Video Element has two listed sources. One .WEBM (VP8 with alpha channel) and one .MP4 (HEVC with alpha channel). I am sure, that something is wrong with the MP4 file, but I don't understand why it works in Safari on Mac, but doesn't on iPhone. Shouldn't they both play the same File?
Here is my workflow:
masking the subject in DaVinci Resolve
exporting as QuickTime - Apple ProRes 444 - "Export Alpha"
using Shutter Encoder (v15.7) to convert the file to H.265 (.mp4)
under "Advanced Features": Hardware acceleration to "OSX VideoToolbox" & check "Enable alpha channel"
also converting the first file to VP8 (.webm) with "Enable alpha channel"
then adding the Videos to the website like this:
<video height="450px" autoplay loop muted playsinline disablepictureinpicture>
<source
src="(url of the mp4)"
type='video/mp4; codecs="hvc1"'>
<source
src="(url of the webm)"
type="video/webm">
</video>
Here is how it looks on Safari (Mac)
This is what it looks like in any browser on iPhone
I have re-exported, re-converted and re-implemented it multiple times and I just can't get it to work on iPhone. Does anyone have an idea, what the cause could be, or what I can do differently?
Hi,
I noticed that event 'error' from EventSource is not fired in latest iOS 18, when web application is minimized and then re-activated. This was working in previous versions, so it is probably regression bug.
Behavior in iOS 17:
PWA application has active SSE/EventSource connection with server. Then some other application becomes active for more then ≈20 sec, so that SSE connection is closed. After SSE connection is closed, application is opened again. When application becomes visible, 'error' event is fired. This is expected behavior and this way also works on other non-iOS systems.
Behavior in iOS 18:
Following same steps as before it looks like that error event is not fired. Also,readyState of EventSource is 1 (EventSource.OPEN ), even if SSE connection is closed.
If connection is interrupted when application is in foreground, then error event is fired on both iOS versions.
This is quite problematic, because previously you could rely on 'error' event to trigger reconnection, when application becomes visible, but now this is not possible. Also EventSource readyState is 1, even if there is no connection to the server, so it is in wrong state.
Any thoughts?
Everything was working fine for 4 years.
But since Ventura, when the WKWebView is in focus, the keyDown event are not happening. Not only they don't fire inside of web page input box, but they won't register in the app either.
As long as a WKWebView is in focus, the keyboard events won't work.
The app does not receive the key events, and the web page will not receive the js events keyDown and friends. This is particularly painful with auto complete input box.
Test with an empty project with only a WKWebView with this page
https://www.toptal.com/developers/keycode/for/d
It does work fine on iPhone and iPad.
Message to Apple : You force us to use your Safari engine, yet it is always broken. Don't wait for 8 months to fix it this time, we would be tempted to go full web and skip native app with all the store certification problems.
We are using aws amplify for our social logins with signInWithRedirect.
When a user selects apple login on iphone and cancels the appleId popup, the user can't click any social login buttons anymore, including the apple one.
Refreshing the page resolves this.
Dependent fields for multi-select options and dropdown fields are not displaying in Safari, although they work correctly in Chrome and Firefox.
Scenario
You have a form built with ASP.NET and Razor, where users need to select multiple options from a dropdown list to trigger the display of dependent fields.
Multi-Select Dropdown: The form has a multi-select dropdown for choosing different categories (Category A, Category B, etc.).
Dependent Fields: Based on the user's selection, certain dependent fields should become visible. For example, if the user selects Category A, an additional input field titled "Details for Category A" should be shown.
Expected Behavior (Chrome & Firefox)
When the user selects Category A or Category B, the corresponding input fields are displayed dynamically, functioning as expected.
Issue in Safari :
In Safari, the dependent fields do not show up when a user selects any category. It's as if the JavaScript or the CSS responsible for displaying these fields is not executing correctly.
CHROME
SAFARI
Browser: Safari (Version 18.0 (20619.1.26.31.6))
Operating System: MacOS (sequoia 15.0)
Device: MacBook Pro 14 Inch Apple M3 Pro , iPhone 14 iOS 18.0
Hai guys,
I'm trying to do autofocus on the search input while user clicks the search icon but its not working as expected in iPhone and iPad so go through some blogs and stackoverflow they mentioned the apple has removed the focus() from touchable device for usablity reason is anyone come up with the same issue or having solution for this kindly share. That must be helpful for me.
We as a team of engineers work on an app intended to visualize medical images. The type of situations where the app is used involves time critical decision making for acute clinical conditions. Stability of the app and performance are of almost importance and can directly help timely treatment action. The app we are developing uses Javascript. It has been observed the footprint of the app is lagging by 2 to 3 seconds in releasing memory while javascript is expecting the memory to be cleared. This is affecting the stability of our application and preventing us in delivering the right quality of application.
The problem specifically can be described as follows, using javascript create an array and then remove it and after removal of the array, create a new array of the same size immediately and again remove it. Because the memory is not released in time, if you repeat these steps a few times the app memory footprint will increase and that crashes the app.
To reproduce this scenario, we have created a simple app which creates an array with size of 100MB and checks the memory footprint using the Xcode instrument tool.
When we create an array of 100MB size, sometimes it shows the memory footprint peak of around 700MB-800MB and when we clear the array by assigning it with an empty array it releases the memory after 2-3 seconds.
Considering the critical nature of the app, I urge you to look into this and provide necessary support and resolution.
Please refer below sample code that will help to reproduce the mentioned scenario.
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
@IBOutlet var webView: WKWebView!
let myHTML = """
<!DOCTYPE html>
<html>
<head>
<style>
.button-style {
width: 400px;
height: 200px;
margin: 15px;
font-size: 50px;
}
</style>
</head>
<body>
<button type="button" class="button-style" onclick="loadDataInCache()">Load Data In Cache</button>
<button type="button" class="button-style" onclick="removeDataFromCache()">Clear Cache</button>
<script>
const size = 1024 * 1024 * 100;
let numberArray = [];
function loadDataInCache() {
numberArray = Array(size).fill(0);
}
function removeDataFromCache() {
numberArray = [];
}
</script>
</body>
</html>
"""
override func viewDidLoad() {
super.viewDidLoad()
// self.view.addSubview(webView)
webView.loadHTMLString(myHTML, baseURL: nil)
}
override func loadView() {
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
view = webView
}
}
There is a change log in Safari 18 Beta mentioning that you can now via MDM control Safari's extensions state and make an extension be enabled after you've installed it - "Added support for Device Management of extension enabled state, private browsing state, and website access on Managed Devices. (113051857)"
However I could not find any documentation for it, I need to know what to set in my plist/mobileconfig file.
Does anyone know (or maybe apple is here as well and can help) where would this be documented?
Thanks!
PLATFORM AND VERSION
iOS
Development environment: Other: Xamarin iOS App
Run-time configuration: iOS 14.4.2 and above
DESCRIPTION OF PROBLEM
We are using WKWebView control in our application. It loads a page, wherein there is a code which gets triggered to execute a Synchronous Ajax/XmlHttpRequest. This request needs about 1 min time to complete, but it gets aborted after 10 secs.
Observed in iPhone 6S 14.4.2. Also seen the same behavior in the latest version of iPhone and iPad OS.
Need help on the below points:
How can I extend this timeout?
Making it an Asynchronous call would have regression. Hence the ask for any other alternative to extend this timeout.
STEPS TO REPRODUCE
In the WKWebView have a webpage, which gives a Synchronous ajax/XmlHttpRequest call to a Web API, which takes more than 10 seconds to complete. The Ajax call sample code is as below, which uses jquery:
var startTime = performance.now();
$.ajax({
async: false, // Synchronous ajax call
type: "POST",
url: "http://testsite:8000/api/RunTestTimer",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
timeInSeconds: 15
}), // timeInSeconds is the parameter name in the Web API, which I used to run a timer on the server-side for the value passed to the ajax call
dataType: "json",
beforeSend: skelta.forms.utilities.addRequestHeaders
})
.done(function (result) {
var endTime = performance.now();
var message = "Request Successful (Time Taken to execute: " + ((endTime - startTime) / 1000).toFixed(3) + " secs; Type: " + "POST" + "; Async: " + "FALSE" + "; Timer: " + "15" + " seconds):" + JSON.stringify(result);
console.log(message);
})
.fail(function (result) {
var endTime = performance.now();
var message = "Request Failed (Time Taken to execute: " + ((endTime - startTime) / 1000).toFixed(3) + " secs; Type: " + "POST" + "; Async: " + "FALSE" + "; Timer: " + "15" + " seconds):" + JSON.stringify(result);
console.log(message);
});
i have a site that host my videos using vdocipher. My videos are not showing up on apple devices. vidocipher instructed me to create an apple account and to Request Apple FairPlay DRM Production License.
Do i have to pay to be able to do that?
It seems Safari 18's fetch() does not include credentials even credentials: include and safari extension has host_permissions for that domain.
Is there anyone has this problem?
I try to request in popup.js like this:
const response = await fetch(
url,
{
method: 'GET',
mode: 'cors',
credentials: 'include',
referrerPolicy: 'no-referrer',
}
);
and it does not include the cookie from host_permissions.
Those code worked in Safari 17 (macOS Sonoma).
Since iOS 18.1 launched as a beta, we've been getting reports from end users on iPhone 15 Pro and iPhone 15 Pro Max specifically. They're reporting that our WebView is unable to load our local HTML content. I'm curious if anyone else has had their app or users run into this issue?
So far I've tried installing the most recent XCode Beta 16B5014f and installed an 18.1 emulator, but our app worked fine. It's also working fine on all my real devices, but we don't have a 15 Pro to test on. I'm curious if this is related to the processor on these devices and how they are intended to support Apple's new AI coming in 18.1.
iOS 18 WKWebView images are not loading, no errors in older versions.
The example while loading HTML is as follows. A problem occurs when you pull an image from a url. To get a URL image you need a cookie or something. I add them too, but it doesn't work on iOS 18. I get the error "An error occurred trying to load the resource." and a blue question mark on the screen.
webView.configuration.websiteDataStore.httpCookieStore.setCookie(cookie)
<html>
<head>
<style>
body {
font-family: -apple-system;
margin: 0;
padding: 0;
text-align: center;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Resim Görüntüleme</h1>
<img src="https://xx.***.xx/example.png">
</body>
</html>
"""