adyen.encrypt_0_1_16.js causing forced reflows when using CreditCard input field.

[NickdeK]

As described on the original ticket in the adyen-magento github:

Magento version: 1.9.2.4 Plugin version: 2.9.0 Description The adyen.encrypt_0_1_16.js and adyen.encrypt_0_1_18.js is causing a lot of forced reflows in our checkout. This has apparently been a issue for a long time but just recently got some attention.

The problem occurs when filling in a credit card number, after one or two digits the input field stops responding to any input for about 3 seconds. When recording the issue in the observer I see a function call in the adyen.encrypt_0_1_16.js:204 that eventually calls the getJsFonts a lot. Chrome indicates this as the most likely cause for performance issues during the recording.

Tried to update to module to 2.9.6 and switching the encrypt js file to 1.18 without any luck. Also removed our theme rewrites on the cc.phtml with still the same problem.

[NickdeK]

Any news on this?

[NickdeK]

Due to a lack of response I've been looking for a solution/workaround myself. I changed the adyen.encrypt_0_1_16.js file and put a return in the getJsFonts function to prevent it from forcing reflows. It's not a ideal solution, but because the file is minified I can't see what it's doing.

[ArnoudAdyen]

Nick,

Indeed late from me to respond. Apology. CSE is not my main focus at this point in time.

From what I can tell: getJsFonts is part of device fingerprinting. So by changing the fingerprinting mechanism you create a potential fraud prevention issue. This because the fingerprint will now become different from the ones generated before even though it's the same device/browser/etc. Also fingerprints from your CSE users will no longer be the same as the ones generated for the same shopper using the HPP or checkout (If you also integrated in this fashion).

If I recall there were issues in earlier versions of the Magento plugin which would create a new Encryption object on each keypress. This would also trigger a new device fingerprinting sequence to be initiated.

To my knowledge this bug has been fixed by the plugin development team quite a while ago, although I cannot quickly find in which version exactly. My best guess is that it was fixed in https://github.com/Adyen/adyen-magento/commit/0ca8392aa48e13b22d06dcdd75cb6e9a8c535330

[NickdeK]

Hi Arnoud,

Thanks for your reply, we won't be implementing my original workaround, good to know ;)

I've checked the commit you linked and referenced it with our installation and possible theme overwrites. These changes were not in them, but when I apply these changes the problem still exists; the getJsFonts does a lot of stuff and causes a lot of reflows.

It seems that this issue has a bigger impact on Chrome/Safari and less on Firefox. Any ideas?

[bdefore]

I also ran into this heavy thrashing from getJsFonts. We may remove device fingerprinting due to the slowdown this applies to our web app.