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

General Documentation

Post

Replies

Boosts

Views

Activity

Bring back device views in Responsive Design Mode
In Safari 17.0, the Responsive Design Mode was updated with two major changes. The quick device view icons that were at the top were removed in favor of a simple resizable web view. New integration with Xcode simulator for easily opening a website in a devices native simulator. The new simulator integration is nice. It definitely promotes giving a much better testing of webpages since we get to see the webpage in the native app/environment. I think that this new integration is welcoming. However, removing the device views has been a major step backwards. These views gave us quick access to checking webpage layouts across different devices with the click of a button. As a web developer, I am aware that these views are not a guarantee that the website will be fully functional on the device clicked on. The simulator is better for that. But during the development process, these views were good for quick sanity checks as it was quick and "close enough". Having to launch multiple simulators to test on two different iPhones and two different iPads takes a lot of time. The devices have to boot up each and load the website. This wastes minutes of time vs the fraction of a second it did before, just for a quick check. Another downside of the simulators is that if I am testing a web app that requires a login, I need to log into each app on every simulator. The older responsive design mode just used the exact session that I was logged into Safari with. I submitted this as feedback as well... https://feedbackassistant.apple.com/feedback/13225118
7
23
2.7k
Oct ’23
While camera loads then audio is playing(Wrong speaker) at earpiece in place of speaker in iOS17 only
In My PWA app I am using camera of getUserMedia() and html audio tags, So In my app I am using videos audios and camera based on requirements, so When I have updated iOS17 I have stared facing below issue. When I am loading camera after premission given. my audios are playing in ear speaker and not in media speaker only for ios17, older ios versions it is working fine. I am using javascript, angular, ionic with html5 css for developing my app. Please provide solution.
0
0
684
Oct ’23
How can I resolve the issue where, in iOS 17, audio plays through the earpiece instead of the speaker when the camera loads?
In my PWA app, I utilize the getUserMedia() API for accessing the camera and also employ HTML audio tags to handle various types of media content. However, since updating to iOS 17, I've encountered an issue where, after granting permission for camera access, audio playback occurs through the earpiece instead of the media speaker. This problem is specific to iOS 17; earlier iOS versions work as expected. My app is developed using a stack that includes JavaScript, Angular, Ionic, HTML5, and CSS. Can you please provide guidance or a solution to address this issue and ensure that audio plays through the media speaker when using the camera on iOS 17?
0
0
699
Oct ’23
iOS 17 homescreen pwa dark/light mode not working
CSS based dark mode / light mode changes are not being applied to websites installed to homescreen as PWA (Webapp). Changing dark/light mode does not immediately change the displayed PWA style. A restart of the webapplication is required for the css to take effect. While in the browser the css is being applied immediately as expected. This bit only occurs on iOS 17. iPadOS and OSX work as expected. Example: https://whatpwacando.today
7
5
1.8k
Oct ’23
Safari Web Inspector ultra lag
So previously I had a Mac Pro 2020 Touchbar with i5 16GB RAM and it was a pain to work with Safari due to the lagness of the web inspector. I thought it was related to my hardware. Upgraded recently to an M2 Pro chip 32GB 2023, and still happens the same, i can't believe how bad it is to develop & work with Safari. Even when trying to search on files it lags as if it has a 500ms debounce per key stroke. Adding breakpoints and following code line-by-line, everything is laggy. What is going on? It's literally impossible to work on big projects and having to debug with Safari.
0
1
627
Oct ’23
WKWebView can not load "https://www.baidu.com"
I created an WKWebView, but it can not load "https://www.baidu.com" and also it keeps calling decidePolicyForNavigationAction function it works well for other website @interface ViewController() @property (nonatomic, strong) WKWebView* webview; @end @implementation ViewController (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.webview = [[WKWebView alloc] initWithFrame:NSMakeRect(0, 0, 500, 500)]; [self.view addSubview:self.webview]; self.webview.navigationDelegate = self; NSURL* url = [NSURL URLWithString:@"https://www.baidu.com"]; NSURLRequest* request = [NSURLRequest requestWithURL:url]; [self.webview loadRequest:request]; // [self.webview reload]; } (void)setRepresentedObject:(id)representedObject { [super setRepresentedObject:representedObject]; // Update the view, if already loaded. } (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction preferences:(WKWebpagePreferences *)preferences decisionHandler:(void (^)(WKNavigationActionPolicy, WKWebpagePreferences *))decisionHandler{ decisionHandler(WKNavigationActionPolicyAllow, preferences); }
0
0
338
Oct ’23
The result of Element.prototype.scrollBy is abnormal on Safari with iOS 17?
I found an anomaly in the scrolling position when using Element.prototype.scrollBy to scroll DOM elements. For example, when using scrollBy(0, 20) to scroll the element, the scrollTop read immediately after the scroll is completed is the expected 20. However, after adding some delay, it becomes 40. It seems like after scrolling a distance of ‘a’, the scrollTop read after the delay becomes ‘2a’. Below is the minimal case I tried to write. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="wrapper" style="overflow-y: scroll;height: 50px;"> <div id="scroller" style="height: 200px;"> </div> </div> <script> const wrapper = document.getElementById('wrapper'); wrapper.scrollBy(0, 20) console.log(wrapper.scrollTop) // will output 20 setTimeout(() => { console.log(wrapper.scrollTop) // will output 40 }, 500) </script> </body> </html>
0
0
294
Oct ’23
The result of Element.prototype.scrollBy is abnormal on Safari with iOS 17.0?
I found an anomaly in the scrolling position when using Element.prototype.scrollBy to scroll DOM elements. For example, when using scrollBy(0, 20) to scroll the element, the scrollTop read immediately after the scroll is completed is the expected 20. However, after adding some delay, it becomes 40. It seems like after scrolling a distance of ‘a’, the scrollTop read after the delay becomes ‘2a’. Below is the minimal case I tried to write. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="wrapper" style="overflow-y: scroll;height: 50px;"> <div id="scroller" style="height: 200px;"> </div> </div> <script> const wrapper = document.getElementById('wrapper'); wrapper.scrollBy(0, 20) console.log(wrapper.scrollTop) // will output 20 setTimeout(() => { console.log(wrapper.scrollTop) // will output 40 }, 500) </script> </body> </html>
0
0
559
Oct ’23
WKWebView UIDelegate Methods Not Being Called on Mac Catalyst (WKUIDelegate)
I have a WKWebView that sets the UIDelegate: self.webView.UIDelegate = self; The following methods are never called when I right click in the WKWebView to being up a context menu: -(void)webView:(WKWebView*)webView contextMenuForElement:(WKContextMenuElementInfo*)elementInfo willCommitWithAnimator:(id <UIContextMenuInteractionCommitAnimating>)animator -(void)webView:(WKWebView*)webView contextMenuConfigurationForElement:(WKContextMenuElementInfo*)elementInfo completionHandler:(void (^)(UIContextMenuConfiguration * _Nullable configuration))completionHandler - (void)webView:(WKWebView *)webView contextMenuDidEndForElement:(WKContextMenuElementInfo *)elementInfo; This is from a Mac Catalyst app (I'm on macOS 14.0 23A344)
4
0
696
Oct ’23
WKWebView -requestMediaPlaybackStateWithCompletionHandler: Reporting Incorrect Playback State?
So I have a WKWebView with a loaded page. This page is playing an embedded Youtube video. The playback state is WKMediaPlaybackStatePlaying. All good. Then I click a link on the page (navigation jumps to a new page) and the video is no longer playing. No video or audio. The navigationDelegate calls -webView:didFinishNavigation: And my navigationDelegate call -requestMediaPlaybackStateWithCompletionHandler: on the webview from within -webView:didFinishNavigation: And in the completion handler of -requestMediaPlaybackStateWithCompletionHandler: the playback state is WKMediaPlaybackStatePlaying but nothing is playing because we are on a new page.... I even tried calling -requestMediaPlaybackStateWithCompletionHandler: after a delay but that doesn't seem to make a difference (even gave it a delay as long as 5 seconds)
4
0
682
Oct ’23
NSAttributedString doesn't format HTML tables properly on Sonoma
This issue has already been reported to Apple via the Feedback Assistant as FB12401598 and a code-level support incident has been opened to follow up, but so far I haven't heard anything. The problem is that the NSAttributedString used to be able to load HTML files correctly via the [NSAttributedString initWithHTML:options:documentAttributes:] method (or its Swift equivalent). As of the developer beta of Sonoma, however, this no longer works. The method loads the attributedString but HTML tables are completely ignored. Every cell in the table just appears on a new line. The app I'm working on has a bunch of HTML templates that get drawn inside another View using an NSAttributedString. This has worked for years but no longer works on Sonoma. Does anyone know a decent workaround for correctly drawing some formatted text whose formatting is specified via HTML? I'm currently exploring the idea of converting the HTML files to RTF on an older system and using RTF, but the RTF format isn't nearly as simple as HTML. Here's a screenshot of a simple project and Safari showing the same HTML side by side
6
0
1.2k
Oct ’23
Query parameters are unavaialble in Safari in Private mode
Recently I noticed that users with Safari 17 have some troubles using my website. I found out that the problem affects only users who use Safari in a private mode. After I dug deeper I realised that for some reason when I execute "window.location" for these users, query parameters do not present there even though they are actually present in the URL. For example, user is on the URL https://mywebsite.com/?code=TULEnfW1zRlqazI7XhM_QV7mxqPr-bV&state=5c5dbb2a-2332-4db7-a657-d2dc713d3e67 But the "window.location.search" returns an empty string. Also, the issue is only reproduced when user is actually redirected to the "broken" page, but it works fine if the user opens the page in a new tab. Issue is reproduced on both iOS and MacOS. I have a suspicion that the issue is somehow related to the recently added feature which prevents cross-site tracking, however, disabling that feature did not help. Does anyone aware of any recent changes to the behaviour of "window.location" in Safari? Thanks!
6
6
2.4k
Oct ’23
How do i find the culprit of "exceeded mem limit" errors on iOS devices visiting a particular web page?
With a physical iPhone attached to the dev tools on my laptop, the memory usage of this web page https://nypost.com/2023/10/11/australian-swimmers-almost-walk-into-shark-as-it-swims-close-to-shore/ consistently grows until it reaches the memory limit of the device (in my case, about 1.5GB) The safari dev tools has a memory profiler timeline which breaks down memory usage into categories including "Javascript", "Layers", and "Page"; is there a way to break these down further to individual scripts/resources? I have also tried looking at the Javascript allocations profiler, but the computed heap size reported in its snapshots never comes anywhere close to the 700+ MB of "JavaScript" memory usage reported by the Memory profiler.
2
0
858
Oct ’23