::-webkit-scrollbar-thumb does not work in iOS 13 devices, Need to change thumb colour from black to white for dark background. Tried below solution but not working. ::-webkit-scrollbar-thumb { background: white; } Any suggestions. Thanks

After watching the WWDC 2023 “What’s new in web apps” session, I am unclear on current best practice for custom icons and custom splash screens in iOS PWAs (progressive web apps). Should we now use manifest.json entries, or the old link/meta tags way still? Is there any Apple sample code for a PWA that, when added to the Home Screen on iOS, shows an app with custom icon and a custom splash screen compatible with all devices? The Configuring Web Applications documentation is marked as Archived. Is there a newer version? Specifically, do we still have to provide a splash screen PNG for every possible device resolution? This is a serious burden and likely to break whenever a new device is released. It would be ideal if a splash screen could be synthesized by centering an icon on a background of a given color. I can’t get that to work.

Hello, I try to develop extension for safari. I edited info.plist but I can't see my menu items. My Info.plist page <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>NSExtension</key> <dict> <key>NSExtensionPointIdentifier</key> <string>com.apple.Safari.web-extension</string> <key>NSExtensionPrincipalClass</key> <string>$(PRODUCT_MODULE_NAME).SafariWebExtensionHandler</string> </dict> <key>SFSafariContextMenu</key> <array> <dict> <key>Text</key> <string>Search for selected text in MyApplication.</string> <key>Command</key> <string>Search</string> </dict> <dict> <key>Text</key> <string>Add an entry for selected text in MyApplication.</string> <key>Command</key> <string>Add</string> </dict> </array> <key>SFSafariWebsiteAccess</key> <dict> <key>Level</key> <string>All</string> </dict> </dict> </plist>

my web service has video content. the problem is in chrome browser, downloading and playing video is much faster than Webkit browser (Safari and WkWebView). we are struggling to find the reason why there is huge gap between two browsers. we've checked browser inspector and there's something look like error in safari inspector that doesn't appear in chrome. There are two cases in network section. First red header case that I think something went wrong Second yellow header csae that I think succeeded to donwload

I am importing video files from amazon s3 via mac os safari video tag. It's fine in chrome, but in safari, the video is intermittently not being received. As you can see in the picture, I am getting the same status code 206, but the red 206 does not contain the address and host. If anyone knows why, please share the solution.

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!

I have some little helper apps in mind for which it would make sense to write them as web apps which can be «Add to Dock» in macOS Sonoma and be used just like regular native apps. But it seems that the minimum window size for such apps is fixed at 320 × 567. This is way too large for little helper apps with maybe two text fields and a button. It looks ugly to have this much empty and unused space. I guess there is no way to be able to make the main window of a web app smaller?

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 would like to create a web app where you can drag and drop emails from Apple Mail (on macOS). When you drag emails to the desktop an .eml file is created, but when you drag emails to the browser no file is being transferred, I can only get the mail’s subject. So is it possible to drag and drop emails from Apple Mail to browsers? And if yes, then how? So far I've tried chrome and safari, but neither got any files with the dragged element. On windows with outlook or thunderbird this wasn’t an issue, so I hope it can be done with apple mail as well. Thanks in advance

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.

Does webkit have a way to display a smart banner for a home screen web app similar to how a smart banner can be displayed for native apps? I recently noticed (10/23) that Twitter showed a smart banner encouraging Home Screen web app on my Mac running Sonoma. How is this done?

I am facing an issue while accessing a local web server within my Xamarin iOS application using the EmbedIO library. The web server serves static files, and it works perfectly on older iOS versions and in the iOS 17 simulator. However, when the code runs on an actual iOS 17 device (iPad 6th gen, running iPadOS 17.0.2), in web view it shows nothing. DidFailProvisionalNavigation throws an error that it could not connect to the serrver

Safari 17 launched with a new feature to add web apps to the macOS Dock. However, it seems to use the favicon.ico file as icon, instead of a higher resolution apple-touch-icon.png. I would prefer to specify a different icon than favicon.ico for this. My favicon.ico is low resolution and includes no margins, because it’s meant to be displayed in small sizes (like in a browser tab). For the Dock icon, I would like to specify a different file that includes some margin around the content, and with a higher resolution. Similar to the apple-touch-icon.png which is used on iOS. How can I achieve that? Shouldn’t Safari on macOS also use apple-touch-icon.png for this purpose, instead of favicon.ico?

I'm a web-developer debugging an error in my web page, all the users with Safari 14 are presenting the error. How can I downgrade my safari 16 to 14 in order to reproduce the error? I have to reproduce the error so i can understand it, and then fix it, like a normal web-developer that have to downgrade browser to simulate real user usage scenarios.

Hello, safari consumes less CPU than Chrome, but it does not consume less RAM. When you access YouTube in Safari, especially when you skip 5 seconds while watching a video, the buttons are very inadequate compared to Chrome. The video and audio lag, the loading sign appears and the audio lag is very annoying. At the same time, when I log into Twitter, some videos do not play but remain loading. While browsing the web in Safari, the mouse sometimes remains stuck. While typing, the mouse becomes a line, but when I hover over something to click, it still remains as a line. There are such bugs. I like to use Safari, it is very useful, but I always prefer to stay in Chrome because of such errors. I try it every time Apple updates Safari, most bugs go away, but new ones come and unfortunately the Youtube problem is very bad. This problem only occurs on YouTube, not on Netflix and similar platforms. Browsing YouTube with Safari is very annoying. I hope you find a solution to these problems soon. Since I deal with CDN and Linux servers, the web is very important to me and I like the safari web tool part, but it is not an immersive view. It gives the impression that I shouldn't have opened it. I hope a new design language will be added to this design. Other than that, using safari is nice and I love how minimalist it is. Thank you, I wish you good work.

Hey Developers! I love web design and am trying to test out some CSS, I am currently using a MacBook Pro 13" (2020 Version), I only use Safari and I want to know if I'm able to simulate other devices like a Windows 10 PC, an Android phone, an iPhone, or an iPad. I do own an iPhone and iPad but wanted to do it all on my Mac, I've tried searching for Safari extensions to do this but so far I haven't found one. If you could give me some suggestions or a link to what I should use it would be appreciated. Thanks, Mateo

The end user experiences error "Failed to load resource: the network connection was lost" when using safari browser via reverse proxy only(Azure Front door). Using google chrome, or accessing the resource directly, the user does not see the error. After taking a packet capture and HTTP Archive traces, we were able to determine that the safari browser is completely blocking the traffic from being sent over the network.

Are there any updates for WKWebView on iOS 17? I see that Safari now has more privacy settings such as "Advanced tracking and Fingerprinting Protection", but does this apply to WKWebViews or just Safari? I'm assuming just Safari. Also, is there a way to detect the fingerprinting settings on Safari? Thank you.

For example, this video does not work in Safari either through the video tag or through simply opening the link. I can't figure out what exactly is wrong with this video, since most of the others work well. Any advice?

I am trying to run JavaScript only after the page has loaded, and according to here - https://developer.apple.com/documentation/safariservices/safari_app_extensions/injecting_a_script_into_a_webpage, I should use DOMContentLoaded. However, it does not seem to work. This is my content.js file: function runOnStart() {     document.addEventListener('DOMContentLoaded', function(e) {         document.body.style.background = "rgb(20, 20, 20)";         document.html.style.background = "rgb(20, 20, 20)";                var divElements = document.body.getElementsByTagName('div');         for(var i = 0; i < divElements.length; i++) {             let elem = divElements[i];             elem.style.background = "rgba(255, 255, 255, 0.05)";         }     }); } runOnStart(); If I take the code outside of the event listener, it runs fine, but a lot of the elements haven't loaded in yet so it doesn't work as it should. The function is definitely running, but the event listener simply doesn't work. I appreciate any help you can give!