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!
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.
Post
Replies
Boosts
Views
Activity
After migrating from iOS 16 to 17, Safari does not show svg icons. On devices with iOS 16 they are displayed
Hello,
looks like the latest Safari update broke WebGL2 support.
You can reproduce by updating to iOS 17.0.2 and visit https://get.webgl.org/webgl2/ with Safari.
I've reproduced using an iPhone 11 MWM32QL/A
Thanks,
Luca
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
I am trying to locate information or documentation on how to pull in photos from the iCloud Shared Albums, but have not been able to find anything yet. Dakboard is currently doing it so I know it is possible, but I cannot find an API or any documentation covering how to access the photos in a Shared Album for incorporation into web applications. Can anyone help?
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
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.
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?
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
I cannot access developer tools from the web app once it is added to Docker. I am facing an issue with the web app, but it is working fine with Safari. I need to debug this. Any guidance on how to open the console/web inspector would be helpful.
When use jsCore, The error reporting location is where JS communicates with Native, and the stack does not contain any valid information. Anyone konws what's the problem.....
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.
sonoma 14.0 safari 17 developer tools JSContext, cannot debug desktop webAPPs.
Anyone know how to set it up?
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);
}
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>
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>
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)
My app has a webview, when the user clicks on an item that is a dropdown list "select>" element, it crashes !!!!!
This happened immediatly after upgrading any device to iOS17
Any fixes??
I want to save a CK record with a png-image as data into an asset field. The image is representated by a base64-string variable in the javascript.
Have given up after one week searching for an answer.
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)