We are investigating a web application performance issue observed in iOS Safari/WKWebView after a recent iOS/Safari update. In the network waterfall, the main backend/document request completes within an acceptable time, but JavaScript resources appear to load late and in a more sequential pattern. We also noticed duplicate requests for some static JavaScript assets, which further delays full page rendering. The issue is more visible in iOS Safari/WKWebView compared with other browsers/environments.

Dear Apple Product Team, I would like to propose a usability enhancement for Safari on iOS that, in my opinion, would significantly improve the user experience. Current Situation: Currently, to change the default search engine in Safari, users must navigate to Settings → Safari → Search Engine, select their preferred option, and return to browsing. This workflow requires multiple taps and interrupts the user's flow. Proposed Solution: Add a quick search engine selector to the bottom toolbar in Safari (adjacent to the Smart Search field). Tapping this control would display a compact menu allowing users to instantly switch between available search engines (Google, DuckDuckGo, Bing, Yahoo, Ecosia, etc.) without leaving the browser. Key Benefits: ⚡️ Time-saving: Instant switching without navigating through Settings 🎯 Flexibility: Use different search engines for different query types (e.g., DuckDuckGo for privacy, Google for local results) 📱 Intuitive UX: Consistent with iOS design patterns and gesture-based navigation 🔧 Enhanced productivity: Streamlines research workflows for power users Implementation Suggestion: Long-press or tap-and-hold on the search field could trigger the selector Alternatively, a small chevron/icon next to the search field could open the menu Selected engine could persist per-tab or session-based, based on user preference I believe this feature aligns with Apple's commitment to privacy, efficiency, and user-centric design. Thank you for considering this suggestion for future iOS releases.

Steps to reproduce: Create a CSS grid with fractional column widths e.g. grid-template-columns: repeat(3, 518.7875px) Set browser zoom to 85% or 115% Observe columns misalign with background-size pattern Expected: Columns render consistently at all zoom levels Actual: Subpixel rounding causes visual misalignment macOS: 13/14/15 inch MacBook

Up until some point relatively recently, I have been able to use Safari's web inspector to connect to the iOS simulator in order to debug our web application in development at http://localhost:8088. Now, the web inspector still OPENS, but it opens in a broken state. The context is available to select from Safari's "Develop" menu: Develop > "iPhone 16 Pro (Simulator)" > "localhost - login". It appears under the Safari heading if I have navigated to the web app in the browser, or under the Expo heading if I am accessing it through the webview in our React Native wrapper app. When I select it, the web inspector window does appear. However, once it opens, the Elements pane is empty, the Console pane is empty, expressions entered into the console are not evaluated, there's no content in Sources, Network, Storage, etc. Important notes: This broken state happens at http://localhost:8088 as well as http://127.0.0.1:8088, and it seems that the insecure context is the issue. The web inspector DOES work for HTTPS sites. If I navigate to, e.g., https://example.com in the simulator and connect the web inspector, everything works fine. The web inspector also works fine in Safari on macOS (OUTSIDE the simulator) when accessing non-HTTPS sites. It's only a problem for non-HTTPS sites when connecting to the simulator. A coworker has the same problem, so it is not isolated to my machine. I would enable TLS locally as a workaround, but this web app is very complex, and I know from experience that it is very difficult for various reasons to set it up properly for our project in development, and it will take significant non-trivial work to do so. So... Why is this happening? Is this expected behavior? Is there a way that I can debug my site on localhost without HTTPS?

I’m a developer working on a Safari Web Extension that’s distributed via the App Store and also tested locally through Xcode. I’m running into an issue that’s affecting my ability to debug errors reported to my Sentry error logging instance from production. The Problem When an error is thrown in one of my extension scripts (e.g., background.js, popup.js, or content.js), the error is sent to Sentry but the captured JavaScript error stack trace replaces the file paths with the webkit-masked-url://hidden placeholder like this: ReferenceError: Cannot access uninitialized variable. at ? (webkit-masked-url://hidden/:14677:28) at ? (webkit-masked-url://hidden/:16307:3) This happens consistently across both App Store builds and local Xcode runs. It prevents me from seeing which script the error came from or resolving the actual source code lines using uploaded source maps in Sentry. My Setup Safari Version: 18.5 (Stable on macOS) Distribution: App Store and local Xcode development Extension Type: Safari Web Extension Error Reporting: Sentry (@sentry/browser SDK) Bundler: Webpack with inline-source-map What I’ve Confirmed I can see the actual source files in Safari’s Web Inspector under the Sources tab when the extension is running. My source maps are uploaded to Sentry correctly and are associated with the matching release. Errors from Safari are being captured by Sentry, but the file URLs are masked, so stack traces cannot be resolved against my original source. My Question Is this behavior (masking file URLs in stack traces with webkit-masked-url://hidden/) intentional for Safari Web Extensions? If so, is there any supported method or workaround to allow exception stack traces to reveal the original script path (e.g., popup.js, background.js) so tools like Sentry or even console logs can point to real locations? I fully understand the privacy/security rationale behind the masking, but as the extension developer, this is making it extremely difficult to debug runtime issues in production. I’d really appreciate any insight into: Whether this masking is expected and permanent behavior If there are any entitlements, debug settings, or Info.plist keys that can alter this behavior for development or for trusted/own extensions If Apple recommends a different way to log extension errors that includes script name or source references Thanks in advance for your help! I’m happy to share more technical details or try out suggestions.

Help get access please

I’m developing a Safari App Extension and I want to debug the background.js script. However, I can’t find any tool or option to do this. When I run the extension from Xcode using the ProjectName Extension (macOS) scheme, I expect to see a “ProjectName” item under the Develop → Web Extension Background Content menu. But there’s nothing there. Has anyone encountered the same issue? How did you fix it? Environment: Manifest Version: V3 Safari: 26.0.1 (21622.1.22.11.15) Xcode: 26.0.1 (17A400)

We attempted to perform automated testing (using Python) on an 11th generation iPad (iPad A16) using Selenium 4.38.0, but we were unable to capture webpage screenshots using the function "driver.save_screenshot(filename)". However, this issue did not occur on an iPad Air 4. During our debugging of the "WebDriver.py" script, we found that after issuing the screenshot command, a status value of 500 was returned, accompanied by an "unknown error". We have communicated with the Selenium team and provided the main Python code(https://github.com/SeleniumHQ/selenium/issues/16555). They suggested that the problem likely lies within the SafariWebDriver, rather than in the "remote_webdriver.py" file. Additionally, we tried using the SafariWebDriver provided by Safari Technology Preview, but the problem persisted.

I'm working on a regular website, in which I'm trying to debug using the (MacOS) Safari Development tools. Since updating my Simulator to iOS 16.4, console.log is no longer displayed in the Console. Even when executing it directly in the console (console.log('test');), it's not printed. Now, I've read that this is a feature for debugging in-app browser content (https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/) but can't find the regular web workaround here. TL;DR: No longer see console.log in iOS 16.4 Safari when debugging from my Mac. Thanks in advance for your suggestions!

After updating to the new iOS, in Safari, my overlays and backdrops using 100dvh no longer cover the full screen there's now a gap at the bottom. Switching to 100vh fixes it, but that causes scrolling issues on older Safari versions since 100vh includes extra height. Has anyone else experienced this? What's the recommended fix that works across iOS versions?

Hello, I'm using Safari 18.2 on Sonoma 14.6.1. I was using the Developer Tools to do a Local Request Override in the Source tab for a CSS file that had a changing query string. I thought I had a good regular expression to catch all variants, but apparently it was too generic and possibly wrong, and made both Source and Network tabs no longer work in my Safari. The regular expression I entered for the Local Request Override was: //build/style.css(?.*)?$ Now my dev tools is broken to the extent that the Source and Network tabs no longer work. The slide-out panel on Source that shows Breakpoints, LocalOverrides, etc no longer shows. The toggle for it does, but does nothing now. UI in general looks a little wack on both tabs. So, since I can't turn off the Local Request Override, I've been trying to locate where Safari may have stored it to manually delete it. Not having a lot of luck on that front. It seems to me that Safari was unable to escape my regular expression correctly and it then causes additional issue. Just a guess though. Any advice or help in getting Safari Source & Network working again / manual removal of the LocalOverride would be greatly appreciated. I'm fluent in OSX and Linux, but grep was not much help surfacing anything that worked. Thanks in Advance, possibly a Safari bug as well.

Hey everyone, After installing iOS 26 beta, I started noticing unexpected behavior in our input event handlers. Specifically, when users type into an field, event.target.value is always an empty string — but only when the JS file is loaded from a specific domain (e.g., t1.daumcdn.net). The exact same code works perfectly when hosted on other domains like t2.daumcdn.net or search1.daumcdn.net. 👉 I created a demo here: 🔗 CodePen Demo The scripts loaded from each domain are 100% identical (apart from the top-level selector). Before iOS 26 beta, this worked fine. I suspect this is related to ITP or some new cross-origin behavior in Safari, but I’d love to know if anyone else is running into this — or if someone knows a workaround. Thanks!

Hi everyone, I'm exploring the new app icon appearance options (Clear, Dark, Tinted) for Progressive Web Apps (PWAs) on iOS26, iPadOS26, and macOS26. Currently, PWA icons don't seem to render well with these new appearances, particularly in Clear and Tinted modes, resulting in very very poor visual quality. You can hardly see anything. Has support for these icon appearances been fully implemented for PWAs? If so, could someone point me to the relevant Apple Developer documentation or provide guidance on how to configure PWA icons to support Clear, Dark, and Tinted appearances? I've searched the Apple Developer Forums, Stack Overflow, and Reddit but haven't found clear information on this topic.A possible solution is a png file with transparent areas, but if the pattern is dark, nothing will be visible in dark mode. Any insights or resources would be greatly appreciated. Thanks! (plz don't give up on PWA😭) Reference: https://developer.apple.com/forums/thread/761615 https://stackoverflow.com/questions/78780916/is-there-a-way-to-provide-light-dark-and-tinted-variants-of-apple-touch-icon https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

I have a UI application built with the Vue framework, using Vuetify for the UI components. There's a div with the class v-application--wrap, which is provided by Vuetify. This class internally includes the following style rule. .v-application--wrap { backface-visibility: hidden; display: flex; flex: 1 1 auto; flex-direction: column; max-width: 100%; min-height: 100vh; position: relative; } The pages were rendering correctly up to version 18.3, but after upgrading to version 18.4, we encountered layout issues related to height. Upon investigation, we discovered that the min-height property was no longer being interpreted or applied correctly. Replacing min-height with height resolved the issue, and the pages began loading as expected. Any insights into why this behavior is occurring would be greatly appreciated.