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

Safari 17.0 does not support css-function as Safari 16.x
I’m talking about CSS-functions: https://w3c.github.io/csswg-drafts/css-values/#round-func) .example { --result: round(up, var(--number), 1); } In Safari 16.x css round didn’t work perfect.round(up, x, 1) did its job, if x wasn’t a “natural” number (all digits after the fraction mark 0). If it was, it resulted the next one! Now Safari 17.0 gives 0 for all numbers! !Update! Sorry, Safari 17 does round! But: not in code like that: :root { --result: round(up, var(--number), 1); Had a project, where this was used to define the number of columns and rows I wanted for an (mostly) quadratic layout. What’s working instead: grid-template-columns: repeat(round(up, sort(var(--items), 1), minimal(…); the former css used the :root-variant (grid-template-columns: repeat(var(--result) …). !Update 2! After some experiments I found: Safari 17 doesn’t like :root any more! (https://www.w3.org/TR/selectors-3/#root-pseudo) And: Safari doesn’t calc correct: `round(up,1,1)˚ is 2 — says Apple. YOU MUST NOT CALC CSS-INTEGERS! CSS-DPI ist ####### ENOUGH!
1
0
1.1k
Oct ’23
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
22
2.2k
Oct ’23
WKWebView Unrecognized Selector Sent to Instance: WebAVPlayerLayer - startRedirectingVideoToLayer:forMode:
I'm using WKWebView in a Mac Catalyst app (not sure if using Catalyst makes a difference but it seems WKWebView doesn't get the "full" Mac version AppKit apps do so maybe it does). When a website has a video playing and if I click the button that I guess is a Picture in Picture button next to the "close" button the web kit process gets an unrecognized selector sent to instance exception. -[WebAVPlayerLayer startRedirectingVideoToLayer:forMode: <-- Unrecognized selector. In debugging mode at least my app doesn't crash the video continues to play and the WKWebview is unresponsive to user interaction. I have to force quit my app. -- I'm on Sonoma 14.0
1
1
459
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
612
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
614
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
6
5
1.5k
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
0
505
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
270
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
248
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
461
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
599
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
595
Oct ’23