Performance Issue with Autofill Functionality in Vite + Vue 3 Application

[manuelgoi]

Steps To Reproduce

1. Start the application with Bitwarden extension enabled.
2. Perform drag-and-drop operations on elements within any scrollable area.
3. Observe the performance impact and frequent calls to requestIdleCallbackPolyfill() in Chrome's performance profile.

Expected Result

The autofill functionality should not significantly impact application performance and should handle idle callbacks more efficiently.

Actual Result

The autofill process significantly affects the application's responsiveness and performance, especially during drag-and-drop interactions within scrollable areas.

Screenshots or Videos

Additional Context

I am experiencing a significant performance issue in a web application developed using Vite, Vue 3, TypeScript, and Pinia. The issue becomes evident when performing drag-and-drop operations on elements within a layer that has overflow scrolling enabled. The problem is associated with the bootstrap-legacy-autofill-overlay.js file, specifically the requestIdleCallbackPolyfill() function.

Issue Details:

Environment: Vite + Vue 3 + TypeScript + Pinia
The performance profiling tools in Chrome DevTools indicate that the requestIdleCallbackPolyfill() function is frequently triggered and consumes a significant amount of CPU time. This function is called as part of the autofill process initiated by Bitwarden, and it severely impacts the application's performance, particularly during user interactions involving scrolling and element manipulation.

The profiling data shows repeated activations of the polyfill function, particularly when inactive scroll activation tasks are triggered. It appears that the autofill functionality is interacting in a way that significantly degrades performance during these operations.

Operating System

macOS, Linux

Operating System Version

Macos 15.1

Web Browser

Chrome

Browser Version

130.0.6723.117

Build Version

(Build oficial) (arm64)

Issue Tracking Info

• I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

[bitwarden-bot]

Thank you for reporting this issue! We've added this to our internal tracking system.
ID: PM-14992

[ejallier]

Hello, same problem for me.
My website is really slower when the extension is activated.
I have the error related to bootstrap-legacy-autofill-overlay.js

[cagonzalezcs]

@jprusik

The performance issues described here are related to similar other reports in the past, for instance: #11077

Some recent improvements in the extension have helped with this kind of concern, but improving the performance cost of autofill is tricky. The main issue at hand is going to be the MutationObsevers that need to identify when changes occur in the DOM to re-capture form field data...

[manuelgoi]

Hello,

First of all, I’d like to thank you for taking the time to address my report and for the continuous improvements you’ve made to Bitwarden. I greatly appreciate all the work that goes into maintaining such an essential tool.

After reviewing your response regarding the performance issue and understanding that the autofill functionality relies on MutationObservers, I still have one main question that I’d like to ask in a humble way.

Why is the requestIdleCallbackPolyfill() being used in the latest versions of Chrome, which natively supports requestIdleCallback? My understanding is that polyfills are generally meant to be active only when their native counterpart isn’t available or supported in the current environment. Could you help clarify why the polyfill is being triggered even in modern browsers where requestIdleCallback is fully implemented?

If it’s due to specific browser inconsistencies or additional functionality provided by the polyfill, I’d love to understand more about this decision, as it seems to impact performance in my use case (drag-and-drop interactions in scrollable areas).

I hope my question doesn’t come across as critical—I’m just trying to better understand how the extension operates and how I might mitigate the performance issue on my end.

Thank you again for your time and support!

[cagonzalezcs]

@manuelgoi

requestCallbackPolyfill does call requiredIdleCallback in browsers that support it.

clients/apps/browser/src/autofill/utils/index.ts

Line 29 in 2185559

export function requestIdleCallbackPolyfill(

The method is a wrapper that falls back to setTimeout in cases where the API does not exist, such as in Safari.

Ultimately, the issue at hand likely comes down to the autofill feature having to act on mutations within the DOM, not the idle callback method itself.

If you have any public websites where this behavior can be observed, it'd likely help the Bitwarden developers resolve the issue... it's tricky to resolve a problem without a place where it can be tested.