search

magento / magento2

Prior to making any Submission(s), you must sign an Adobe Contributor License Agreement, available here at: https://opensource.adobe.com/cla.html. All Submissions you make to Adobe Inc. and its affiliates, assigns and subsidiaries (collectively “Adobe”) are subject to the terms of the Adobe Contributor License Agreement.
http://www.magento.com
Open Software License 3.0
11.5k stars 9.3k forks source link

Checkout stuck step 2 (payment) on Firefox only #7186

Closed miro91 closed 7 years ago

miro91 commented 7 years ago

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:

  4. Add product to basket
  5. Navigate to checkout page
  6. Enter billing address and select shipping method
  7. 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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

dcabrejas commented 7 years ago

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

studiotwentyeleven commented 7 years ago

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 commented 7 years ago

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

miro91 commented 7 years ago

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

dcabrejas commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

KevinMace commented 7 years ago

@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 commented 7 years ago

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

Payment Methods:

Shipping Methods:

SerhiyShkolyarenko commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@miro91 thanks!

Flipmediaco commented 7 years ago

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

Chrome & Firefox Magento 2.1.3

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 commented 7 years ago

@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 commented 7 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 1 year ago

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