Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

General Documentation

Posts under General subtopic

Post

Replies

Boosts

Views

Activity

Malfunction when the host name included in the PWA URL matches the host name included in the URL of the xlsx file accessed from within PWA
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
0
0
312
Nov ’24
HTMLAudioElement on iOS is paused when video plays again
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
Topic: Safari & Web SubTopic: General Tags:
0
0
296
Jan ’25
Apple Psy Button
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
0
0
223
Oct ’24
Memory leak in WebKit caused by KVO and @StateObject
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?
0
0
402
Mar ’25
Add Authorization header to WKWebView.
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?
0
0
334
Feb ’25
Swipe down refreshes page rather than intended vertical scroll
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
0
1
214
Jan ’25
When will CSS animation-timeline hit Safari?
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!
0
2
405
Feb ’25
Device orientation / motion permission activation
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.
0
0
582
Oct ’24
iCloud Private Relay on local network (LAN)
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?
0
0
447
Nov ’24
WebGPU supporting in Safari on macOS
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
0
1
354
Feb ’25
Are my 3d stereo Mars images working fine on Vision Pro? (HEIC format created from 2 JPEGs)
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.
0
0
210
Feb ’25
WebKit Null pointer WebPageProxy::updateActivityState on iOS 17
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.
0
2
381
Feb ’25
Apple Pay Third party browsers - completeMerchantValidation fails
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?
0
0
341
Feb ’25
iOS 18.3.x no longer accepts self singed certificates
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.}
Topic: Safari & Web SubTopic: General Tags:
0
0
590
Feb ’25
Css fieldset/legend with flex and float bug
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.
0
0
535
Nov ’24
Safari-Specific React Animation Issues: Infinite Scroll Breaking on MacBook
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
0
0
443
Nov ’24