Checkout stuck step 2 (payment) on Firefox only

[miro91]

I have magento 2 running on live project and our clients are seeing some weird issue on Firefox browser. I was able to reproduce it only once and after refreshing the page everything is working as expected. I will be happy if someone have/had similar issue and have some information how to debug/fix it.

Preconditions

1. Magento CE 2.1.0
2. Production mode & Varnish
3. Firefox latest version

Steps to reproduce:

1. Add product to basket
2. Navigate to checkout page
3. Enter billing address and select shipping method
4. Click Next button to open payment section

Expected result:

Display loading-mask, load payment section and cart summary, hide loading-mask

Actual results:

Display loading-mask, load payment section and cart summary, loading-mask doesn't hide and stay.

No JS errors on console or network tab in FF (ajax request to getting payment section). After refresh with #payment in URL everything is working fine. Even if open /checkout without #payment (start from 1st step) it's opening 2nd step smoothly.

[dcabrejas]

I have exactly the same issue on Magento 2.1.0, it happens sporadically so I can't provide further details as to how to replicate it other than what @miro91 has already written. I can however tell you that for us, we have replicate it on Google Chrome and Safari so I don't think this is specific to the Firefox browsers. There is nothing in the logs nor in the browser console when the issue happens which makes it really hard, if not impossible to debug.

[Loxzibit]

I have the same issue on two different projects, one is running 2.0.9 and the other is running 2.1.0. Is there a solution for this?

[ghost]

@dcabrejasazagra @Loxzibit are your stores set in production mode?

[dcabrejas]

@jupiter01 I have managed to replicate this issue on both production and developer mode

[studiotwentyeleven]

We are also experiencing this issue on 2.1.0. As @miro91 said after refresh it works fine, we have found the issue across all browsers.

[SerhiyShkolyarenko]

@dcabrejasazagra @Loxzibit @studiotwentyeleven is a Varnish obligatory for reproducing?

[miro91]

@SerhiyShkolyarenko I can replicate it on local without Varnish. Also I was able to get this issue on Chrome, not only on FF

[dcabrejas]

@miro91 @studiotwentyeleven @SerhiyShkolyarenko I didn't use Varnish, I have put in place a quick work around for this issue : Override the following file in your theme : magento/module-checkout/view/frontend/web/javascript/model/shipping-save-processor/default.js
Change every instance of this line fullScreenLoader.stopLoader(); to fullScreenLoader.stopLoader(true); This will force the loader to stop, the true is for force.
Hope that helps.

[SerhiyShkolyarenko]

OK, let's sum up: issue is reproducible on 2.1.0 and 2.0.9, it doesn't depend on browser and doesn't depend on Varnish.
@miro91 @dcabrejasazagra @studiotwentyeleven @Loxzibit how often is it reproducible? How many attempts should I perform for reproducing this behavior?
Have anybody tried 2.1.2 or current develop branch?
Is it reproducible for guest or for logged in user?
15 attempts on Firefox and Chrome were not successful for me. I tried both as guest and as logged in customer. Magento 2.1.2, production mode.

[KevinMace]

We're able to replicate this,

Preconditions
Magento EE 2.1.2
Production mode
Varnish
Firefox and Chrome

Happening as a guest (haven't tested a logged in customer), the issue is occurring 90% of the time.

[SerhiyShkolyarenko]

@KevinMace (and everyone else) which payment and shipping methods are enabled for you?

[KevinMace]

@SerhiyShkolyarenko We've seen the issue using multiple payment and shipping methods.
Payment Methods: Braintree, Ebizmarts SagePay Extension
Shipping Methods: Flat Rate, Table Rates.

There doesn't seem to be a specific method or combination of methods that triggers this issue.

[Loxzibit]

@SerhiyShkolyarenko We have the following setup and it seems to only be happening for guest.

Payment Methods:

• Ebizmarts Sage Pay Suite 1.1.8
• Paypal Express Checkout

Shipping Methods:

• WebShopApps Matrix Rate

[SerhiyShkolyarenko]

@KevinMace @Loxzibit thanks!
Ebizmarts Sage Pay Suite is the only common extension you have. Is the issue reproducible when you uninstall it?
Here I mean complete removal from the code base and running bin/magento setup:upgrade if it doesn't have uninstallation procedure.

[miro91]

@SerhiyShkolyarenko I am also using Ebizmarts SagePay Suite and Paypal same as @Loxzibit I think that we had this issue before installing SagePay extension but I am not sure. I need to remove it and try again to confirm on 100%.

[SerhiyShkolyarenko]

@miro91 thanks!

[Flipmediaco]

We have also been experiencing this issue or a very similar issue.

Chrome & Firefox
Magento 2.1.3

• Paypal Express Checkout
  Ebizmart SagePay 1.1.7

The issue is at Payment Selection the loader does not disappear. I note that there appears to be 2 loaders in use!

I can set the loader that fails to clear to be hidden using CSS (display none) and can continue checkout without issue. The problem appears to be purely that one of the the loaders is not being removed.

Once loader is stuck it tends to persist. Refreshing payment section #payment causes loader to disappear. Clearing browser cookies resolves problem.

The stuck loader is initiated on the shipping section, then a second loader appears briefly over the top of the stuck loader once the payment section is loaded.

When loading is stuck the following markup is present in the page.

<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>

At this point I want to understand what is initiating the loader and I will eliminate our theme by using Luma and the SagePay extension by disabling this.

As a work around I have added the following css to the "Scripts & Style Sheets" configuration as a work around / quick fix (hides all loading masks for the checkout):-

<style> body.checkout-index-index .loading-mask { display:none !important; } </style>

Thanks

Side Point: I have noted that the Pinterest Chrome Extension appears to conflict with the page causing an error when I experience the issue. I will post details of this error found in console when i recreate it.

[magento-engcom-team]

@miro91, thank you for your report.
We were not able to reproduce this issue by following the steps you provided. If you'd like to update it, please reopen the issue.
We tested the issue on 2.1.9

[pkm32]

This issue didn't start for me until I added shipping options (UPS/USPS). I was able to test for weeks using flat rate shipping, with no issues. Even after I added PayPal checkout, I still did not have the loader issue.

I added the CSS snippet Flipmediaco mentioned and it stopped the loader, now checkout loads in 2.5 seconds.

The only problem with this, is that now the success page doesn't have the loader. This will be an issue with impatient people who want to click the checkout button multiple times.

[onepack]

I have it on my testing environment after an update from 2.1.4 to 2.2.0
It happens in Chrome and I have the default matrix rate enabled on dev and the MSP payment provider.
However, disabling MSP doesn't change a thing. It still hangs on checkout.
Refreshing seems to help it forward in rendering the screen but the loading never stops.

[onepack]

I did some javascript debugging and fixed the issue.
I was getting: Cannot read property 'top' of undefined and in my custom javascript I had:
var topposnow = $('.nav-sections').offset().top
I fixed it by checking for the availability of the .nav-sections before setting the var topposnow.
As the checkout doesn't have the top menu the undefined was showing up there.
After this fix the continuous loading stopped and all is working fine now.

[RX-78-2GetRich]

I also encountered this problem in magento2.4.6, is there any solution?