<script src="https://js.braintreegateway.com/web/3.92.0/js/client.min.js"></script>
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
If the host name included in the URL of the PWA and the host name included in the URL of the xlsx file accessed from within the PWA match, the upper menu portion of the application selection screen for opening the xlsx file will be blank.
However, if the host name in the PWA URL is changed from the PC name to an IP address and the host name in the URL of the xlsx file accessed from within the PWA is left as the PC name so that the host names do not match, the upper menu portion of the application selection screen for opening the xlsx file will be displayed. (e.g., the Safari icon appears in the upper right corner).
Is anyone else experiencing the same phenomenon? Is it a bug?
Topic:
Safari & Web
SubTopic:
General
On iOS (iPhone or iPad) the following behaviour happens:
when both an HTML video element and an HTML audio element are playing on a page,
and the video source ends,
and the video source is programmatically forced to play again
then the system will automatically pause the audio.
See following stackblitz project for a sample:
https://stackblitz.com/edit/ios-audio-paused-on-video-playing?file=README.md
Steps to reproduce
Feel free to try with both another audio and video source, here limited by the available space in Stackblitz plan.
On an iPhone/iPad device or simulator, in Safari:
browse to index.html
when on iPhone, press iPhone Load to force preloading video. Not needed on iPad
press Play to start playing both audio and video
wait until clip ends and then restarts from 0:00
Expected
Audio should keep on playing and eventually loop.
Actual
When clip restarts from 0, audio is put to pause by the system.
Further details
This does not happen e.g. on Mac Safari nor on another device/browser.
Also, some alternative scenarios:
when HTML video element has the muted attribute, the issue disappears and audio is not paused
when HTML audio element is replace with Web Audio API, the issue disappears and audio is not paused
I have enabled apple pay in my website.. After paying it collect my card details in popup and not showing to proceed the payment..
![]
[Image Edited by Moderator to Remove Personal Information]
Topic:
Safari & Web
SubTopic:
General
Hi!
My SwiftUI app is a rather complex browser app. Starting with iOS 18, the app crashes due to repeted reloads of the WkWebView. I’ve tracked the issue as far as I can, but I still haven’t found the root cause.
My app is structured like this:
MainView holds a cuple of subviews. It also holds a @StateObject called viewModel that holds a lot of @Published vars. The viewModel is passed as a enivormentObject.
Example from ViewModel:
@MainActor class ViewModel: NSObject, ObservableObject {
@Published public var isLoading: Bool = false
@Published public var loadProgress: Double? = 0
public func setIsLoading(_ value: Bool) async {
self.isLoading = value
}
public func setLoadProgress(_ value: Double?) async {
self.loadProgress = value
}
}
WebView is a subview of MainView, which holds a navigation bar, and a UIViewRepresentable, which is a WkWebView.
The WkWebView pushes some states to the ViewModel as the underlying values of the WkWebView changes, i.e. estimaedProgress, and isLoading. This is done via KVO and works like this:
estimatedProgressObservation = self.parent.webView.observe(\.estimatedProgress) { webView, progress in
Task {
await parent.viewModel.setLoadProgress(webView.estimatedProgress)
}
}
isLoadingObservation = self.parent.webView.observe(\.isLoading) { webView, value in
Task {
await parent.viewModel.setIsLoading(webView.isLoading)
}
}
By using a timer in WkWebViews Coordinator, i trigger a load after a configurable amount of time :
func loadUrl(url: URL) {
DispatchQueue.main.async {
console.info("Load URL: ...", sensitive: "Load URL: \(url.absoluteString)")
let policy: NSURLRequest.CachePolicy
if self.parent.settings.noCache {
policy = .reloadIgnoringLocalAndRemoteCacheData
} else {
policy = .useProtocolCachePolicy
}
let request = URLRequest(url: url, cachePolicy: policy)
self.parent.webView.load(request)
}
}
Running the app with the automatic reload enabled freezes the app after a couple of hours. It also seems to freeze Safari on the device. The device needs to be rebooted.
If I inspect the device's running processes, hundreds of ”com.apple.webkit. web content " processes are running.
Removing await parent.viewModel.setLoadProgress(webView.estimatedProgress) and await parent.viewModel.setIsLoading(webView.isLoading) fixes the issue, but it is necessary for other app functions. Therefore, is suspect that the viewModel somehow causes the bug.
The issue arises after a couple of loads 5-10. The debugger shows a message when the processes start to pile up. I suspect its related.
Failed to terminate process: Error Domain=com.apple.extensionKit.errorDomain Code=18 "(null)" UserInfo={NSUnderlyingError=0x12d0e7f60 {Error Domain=RBSServiceErrorDomain Code=1 "Client not entitled" UserInfo={RBSEntitlement=com.apple.runningboard.terminateprocess, NSLocalizedFailureReason=Client not entitled, RBSPermanent=true}}}
How can I find out what causes the suspected memory leak? Instruments gives me nothing of value. The memory leak wasn't present in iOS 17. Is this a bug in iOS 18, or was something intentionally changed?
This screen time is ruining the battery and always goes to dead while I re open. Any idea how to resolve it?
How can i add Authorization header to a wkwebview. I checked https://developer.apple.com/documentation/foundation/nsurlrequest#1776617 which says Authorization header is a reserved http header and shouldn’t be set. I want to set it when requesting a url to the server which will be used for verification. How can i do that?
Hello
I built a WordPress website with a three.js/react front page. On iOS chrome, Android chrome, and desktop chrome all is working well. However, on Safari mobile when the animation loads a downward swipe causes the page to refresh rather than scroll as is intended and working correctly on all the other browsers. Strangely, scroll up works initially and then downward scroll begins to work. I have tried various iterations of overscroll behavior but still cannot aolbe the issue. Any help would be appreciated.
Topic:
Safari & Web
SubTopic:
General
Hi all,
Chrome has it already - animation-timeline aka scroll-animations.
I can nowhere find any informations on what's the status in Safari/Webkit.
Seems like they do not have it on the agenda at all?
Does anyone know anything - I wanted to push a feature request for that - but also seem there is no feature request list anymore for webkit.
See: https://www.w3.org/TR/scroll-animations/
Cheers and kind regards!
We have a web-based viewer which makes use of device orientation.
The permission box only appears on a “touch” and not on a swipe or pinch. Is this normal?
We’ve already tried different listeners: start, end etc but it’s still only initiated the permission request upon a physical touch / tap on screen.
Any ideas / suggestions would be gratefully received.
Many thanks in advance.
Having the app localised and configured to Dutch from Belgium (nl_BE), I open a url with WKWebView. The website locale detects Dutch from Netherlands (nl_NL)
Hi,
I need a version of a web app to be accessible on a local network (LAN), when the users connect to a wifi without internet access.
I provide a valid TLS certificate to validate the website. There is also a local DNS (dnsmasq), with the following entries to return NXDOMAIN, as specified by the documentation.
server=/mask.icloud.com/
server=/mask-h2.icloud.com/
However, without internet (no cellular data), there is an error in Safari instead of the website. When there is some internet connection, there is a warning that allows to continue to the website by showing the IP address, which is not clear for the user.
iPhone users are very frustrated. Is there a solution?
Hi, now we could try WebGPU by manually enabling it in feature flags in no matter Safari or Safari technology preview on macOS.
But, do we know when this WebGPU feature would be enabled by default or any plan to enable it by default in Safari?
Thanks!
Topic:
Safari & Web
SubTopic:
General
I'm currently experimenting to add 3d stereo images in HEIC format to my daily Mars Rover Images website https://areo.info/mars20 which can be opened on a Vision Pro. Only a few images are yet converted into that mode, those on the sol 1411 page.
As I'm currently only working in the Vision Pro Simulator from Xcode, no real 3d effect if of course visible and I'm curious if anyone using the real hardware can confirm that the images are working.
Especially the eye distance correction is important to know about as the Mars Rover camera has a much wider pupil distance than humans and while I entered that distance in the conversion tool, I'm not sure if it worked well. So feedback is welcome!
For those who like to try to create stereo images themselves: I used https://developer.apple.com/documentation/ImageIO/writing-spatial-photos to create a HEIC file from two JPEGs.
We are using WebKit in our app and recently started noticing a crash occurring on iOS 17 and earlier versions. The crash log shows the following error:
Thread 0 Crashed:
0 WebKit 0x00000001a38593cc WebKit::WebPageProxy::updateActivityState(WTF::OptionSet<WebCore::ActivityState>) + 220 (WebPageProxy.cpp:2544)
1 WebKit 0x00000001a39cb1e0 WebKit::WebPageProxy::dispatchActivityStateChange() + 132 (WebPageProxy.cpp:2653)
2 WebKit 0x00000001a3f541f8 WTF::Detail::CallableWrapper<WebKit::WebPageProxy::scheduleActivityStateUpdate()::$_5::operator()() const::'lambda'(), void>::call() + 52 (Function.h:53)
3 JavaScriptCore 0x00000001a48317ec void WTF::dispatchWorkItem<WTF::(anonymous namespace)::DispatchWorkItem>(void*) + 60 (WorkQueueCocoa.cpp:48)
4 libdispatch.dylib 0x00000001964f5dd4 _dispatch_client_callout + 20 (object.m:576)
5 libdispatch.dylib 0x00000001965045a4 _dispatch_main_queue_drain + 988 (queue.c:7898)
6 libdispatch.dylib 0x00000001965041b8 _dispatch_main_queue_callback_4CF + 44 (queue.c:8058)
7 CoreFoundation 0x000000018e623710 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 16 (CFRunLoop.c:1780)
8 CoreFoundation 0x000000018e620914 __CFRunLoopRun + 1996 (CFRunLoop.c:3149)
9 CoreFoundation 0x000000018e61fcd8 CFRunLoopRunSpecific + 608 (CFRunLoop.c:3420)
10 GraphicsServices 0x00000001d34d01a8 GSEventRunModal + 164 (GSEvent.c:2196)
11 UIKitCore 0x0000000190c5890c -[UIApplication _run] + 888 (UIApplication.m:3713)
12 UIKitCore 0x0000000190d0c9d0 UIApplicationMain + 340 (UIApplication.m:5303)
After investigating, we found that this crash was addressed in this https://github.com/WebKit/WebKit/pull/24778 WebKit PR. However, our app is still crashing for users on older iOS versions where this fix is not available.
Is there a known workaround to prevent this crash on affected iOS versions? Any guidance would be greatly appreciated.
I've a apple pay integration on my website. The new sdk, that allows third party browsers.
My integration works well everywhere, except on third party when I read the QR code it results in a "payment incomplete".
I have gone through several threads in apple dev forums, and several guides on implementation steps and troubleshooting. But I'm still without solution.
When Debugging in iOS device I get: "Application failed to provide a valid merchant session. We can't proceed to authorize the transaction."
I've doublechecked, the values I send to create the payment Session are correct, the domain and merchantIds. (It works well with the same implementation on safari, what's the difference here?)
I've also doublechecked the values i'm sending to the completeMerchantValidation, and they are all in the right format and types.
What else can iIcheck?
We have an app store app that hosts an internal webserver we use as a proxy and it works for a period until iOS 18.3.x decides our cert is no longer valid at which point our customer have reinstall the app. This has only become a problem on iOS18.3. We publish the self-signed with out app, and it is valid and accepted until it's not. We know the cert is valid and our implementation of the local proxy has not changed. If we install a cert on the device and trust it, then the app will start behaving normally again without reinstall. We have replicated this locally and the error we are seeing is:
Error Domain=NSURLErrorDomain Code=-1200 "An SSL error has occurred and a secure connection to the server cannot be made." UserInfo={NSLocalizedRecoverySuggestion=Would you like to connect to the server anyway?, _WKRecoveryAttempterErrorKey=<WKReloadFrameErrorRecoveryAttempter: 0x301111e40>, networkTaskDescription=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, _kCFStreamErrorDomainKey=3, NSErrorPeerCertificateChainKey=(
"<cert(0x108e3b700) s: 127.0.0.1 i: 127.0.0.1>",
"<cert(0x108e3b980) s: 127.0.0.1 i: 127.0.0.1>"
), NSErrorClientCertificateStateKey=0, NSErrorFailingURLKey=https://localhost:8082/Blablal/?device=ios&sftouch=1&pgport=8081&secure=1, NSErrorFailingURLStringKey=https://localhost:8082/blahblah/?device=ios&sftouch=1&pgport=8081&secure=1, NSUnderlyingError=0x301e1d680 {Error Domain=kCFErrorDomainCFNetwork Code=-1200 "(null)" UserInfo={_kCFStreamPropertySSLClientCertificateState=0, _kCFNetworkCFStreamSSLErrorOriginalValue=-9802, _kCFStreamErrorDomainKey=3, _kCFStreamErrorCodeKey=-9802}}, _NSURLErrorRelatedURLSessionTaskErrorKey=(
"LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>"
), _kCFStreamErrorCodeKey=-9802, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <541390E2-65FA-47AB-80B1-10209D6C761A>.<3>, networkTaskMetricsPrivacyStance=NotEligible, NSURLErrorFailingURLPeerTrustErrorKey=<SecTrustRef: 0x302670a50>, NSLocalizedDescription=An SSL error has occurred and a secure connection to the server cannot be made.}
When I want legend inside the filedset, not on the border as default browsers design, I set float: left to the legend. It works in every modern browser - Safari too. The problem is when the filedset itself is set to display: flex. Float propertie of the legend is ignored. In other browsers this approach works fine and the float stays and the legend is inside of the fieldset as we expect.
When a tab goes to sleep, all its resources gets killed. When the user has any interaction it gets active again. However, if there is an audio in the tab, it does not play again even after user interaction. One has to reload/reopen the tab.
Is this how it should work?
Is there a fix for this?
I'm encountering a browser-specific issue with a React infinite scroll animation component. The animation works perfectly in Chrome on MacBook, but breaks specifically in Safari:
✅ Chrome on MacBook: Works perfectly
❌ Safari on MacBook: Animation and layout issues
Technical Details
Environment
Browser: Safari: Version 18.1.1 (20619.2.8.11.12)
MacBook 13-inch display
React 18
GSAP for animations
TailwindCSS for styling
Next.js/TypeScript project
Implementation
const MovingGrid: React.FC = () => {
useEffect(() => {
const initAnimation = () => {
const container = containerRef.current;
if (container) {
gsap.to(container, {
x: `-${firstSet.clientWidth}`,
duration: 30,
ease: "none",
repeat: -1,
onRepeat: () => {
gsap.set(container, { x: 0 });
}
});
}
};
}, []);
return (
<div className="hidden lg:block overflow-hidden w-full relative">
<div ref={containerRef} className="flex absolute -bottom-[100px]">
{/* Grid content */}
</div>
</div>
);
};
Safari-Specific Behavior
Images overflow the container in Safari only
Layout gets disrupted when animation resets
Same code works perfectly in Chrome on the same machine
Cross-Browser Testing Results
Safari on MacBook: Issues with animation and layout
Chrome on MacBook: Works as expected
Firefox on MacBook: Works as expected
Safari on iOS: Needs testing
Chrome on Windows: Works as expected
Attempted Solutions
Safari-specific CSS fixes:
/* Attempted Safari-specific fixes */
@supports (-webkit-hyphens:none) {
.moving-grid {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
Modified GSAP configuration for Safari:
gsap.config({
force3D: true
});
Tried various CSS transform and positioning approaches:
className="transform will-change-transform"
style={{ WebkitTransform: 'translate3d(0,0,0)' }}
Questions
Are there known Safari-specific issues with GSAP animations that require special handling?
Does Safari handle infinite scroll animations differently from Chrome in terms of performance or rendering?
Are there recommended Safari-specific optimizations for smooth animations?
Should we implement a different animation approach specifically for Safari users?
Investigation Notes
Performance metrics show no significant issues
Animation frame rate is consistent
Layout calculations appear correct before animation starts
Impact
This issue affects a crucial part of our property showcase website, specifically impacting Safari users on MacBook devices. Given Safari's significant user base on MacBooks, this needs to be resolved for a consistent cross-browser experience.
Additional Context
The animation is part of a larger property showcase feature
Performance is crucial for user experience
Need to maintain visual consistency across browsers
Reproduction Steps
Open website Safari on MacBook [pinkdoorbnb .com]
Observe the infinite scroll animation
Compare with Chrome on the same device
Note the differences in animation behaviour and layout
I would greatly appreciate any insights into Safari-specific animation handling or alternative approaches that work consistently across browsers.
Here is sample
Google Chrome ⬇
Safari ⬇
Topic:
Safari & Web
SubTopic:
General