Page Scrolling Issues during Default Checkout?

[Jeff_Mash]

Just a random question (I am still trying to do testing on this, but I have seen it in the past).

Has anyone experienced any issues during checkout where proceeding from Step 2 to Step 3 results in the page needing to be scrolled back UP to the top?

As an example.......Step 1 of the checkout process, you enter your shipping information. You don't really need to scroll down for this, so when you proceed to Step 2, you are on top of the Step 2 page.

But on Step 2, you usually have to scroll DOWN to the payment information (where you can enter your credit card, etc). I have seen customers who have entered their payment information, proceed to step 3, and then think something is wrong because "the page is blank." However, what REALLY happened is that when they went to Step 3, their browser still kept the same scroll position as the prior step, and they would need to scroll UP to the top of Step 3 page.

Did I communicate that correctly? :)

1. Is this something anyone else has seen before?

2. If so, is there anyway that we can make the page automatically scroll to the top on each Step of the checkout process to avoid the page remaining scrolled down from the previous step?

We are running 1.5.5f responsive classic template.

[mc12345678]

Any indication of which browser(s) seem to exhibit this? For some reason I think I may have seen this in testing, but since I wasn't testing for that, I may have just "ignored" it. :/ bad of me I know, just didn't think about it at the time.

[lat9]

Jeff, taking a wild guess ... is this re-positioning issue occurring when you're using a payment method that "collects card data on-site" (like PayPal Payments Pro)?

[Jeff_Mash]

Jeff, taking a wild guess ... is this re-positioning issue occurring when you're using a payment method that "collects card data on-site" (like PayPal Payments Pro)?

Well, we do have the following three payment modules enabled:

1. PayPal Payments Pro (USA)
2. PayPal Express Checkout
3. Check/Money Order

I don't think this happens all the time, and I haven't been able to reproduce it yet......but I get enough random customers who seem to always have the issue. No doubt it's browser related, but I haven't been able to get more information from them yet.

[Jeff_Mash]

By the way, in doing my own testing, I notice that when you go from Step 2 to Step 3 in the checkout process, there is a very BRIEF second where the screen goes white before the Step 3 page loads. I suspect that in these rare instances, the user's browser goes white but then never directs them to Step 3.

There are NO LOGS in the logs directory that correspond to this, so I am fishing around in the dark for a reason. Since it only happens with a very small percentage of users, I suspect it has to be browser-related.

I am currently waiting to hear from the customer to see if 1) switching browsers will fix her issue, and 2) if so, what was the original browser she was using so that we can perhaps reproduce it on our side.

[Jeff_Mash]

Here's some more info. Perhaps you can check your websites as well.

I have verified this with both Chrome and Firefox.

User enters Credit Card information on Step 2 using the "PayPal Payments Pro (USA)" form.



Upon hitting continue, the next step is still scrolled halfway down the page, giving the impression that it's blank. The user would need to manually scroll back up to see the final checkout step:



Again, I just did this with two browsers. Is there anyway to prevent that behavior from happening?

NOTE: This only happens when entering credit card information. If the user selects any other form of payment option (like PayPal or Money Order), the next page loads fine. But because the user enters in credit card information into text boxes, that seems to be causing the page to remain scrolled down when they proceed to Step 3.

[lat9]

That's most likely due to the PayPal Payments Pro interaction. Since that payment "collects card data onsite", it's got some jQuery that ensures that jQuery will be in effect for the confirmation page.

The delay might be due to a time-lag in retrieving the shipping quotes for the order.

[Jeff_Mash]

That's most likely due to the PayPal Payments Pro interaction. Since that payment "collects card data onsite", it's got some jQuery that ensures that jQuery will be in effect for the confirmation page.

The delay might be due to a time-lag in retrieving the shipping quotes for the order.

Checkout my latest reply though.......I think the real issue is not the quick white screen, but the fact that when entering the card information, the page doesn't load back at the top when continuing. I reproduced it. If you want to check it out, go to my site (mjmmagic.com) and make a dummy account. You can use the following dummy credit card information to see it in action:

4565702339855579
x 5/26
CVV: 478

[lat9]

The "scrolling" issue is due to the jQuery associated "collects card data onsite" processing not re-positioning the cursor at the top of the page, when the tpl_ajax_checkout_confirmation_default.php information is loaded.

[Jeff_Mash]

The "scrolling" issue is due to the jQuery associated "collects card data onsite" processing not re-positioning the cursor at the top of the page, when the tpl_ajax_checkout_confirmation_default.php information is loaded.

Can you suggest or recommend a fix for that? I have no idea how to resolve that! :-/