After migrating from iOS 16 to 17, Safari does not show svg icons. On devices with iOS 16 they are displayed
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
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
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)
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
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!
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.