Magento OnePage checkout step position wrong

Question

On the default magento install when using the onepage checkout, after clicking through the steps eg Shipping Method, the page jumps too far and cuts off the Step title and top 2 form inputs. It does this on all steps in Chrome. In other browsers it isn't as bad although it still cuts off the step title. Is there a way to fix this as it really ruins the UX.

Thanks, C

Answer 1

In js/varien/accordion.js, after this line

contents[0].show();

i added

Effect.ScrollTo(contents[0], { duration:'0.5', offset:-40 });

for a smother effect.

Answer 2

Same problem with the ipad 4, ios7 and safari, magento version 1.4.1.1

After the billing address is submitted the accordion opens the step after shipping, but it's positioned so far up the page the next section's submit button is all that's visible at the top of the screen.

We're also using prototype 1.7 to get past the ie9 checkout bug, so not sure if that's part of the problem.

Found a fix that works for me: open js/varien/accordion.js in the openSection function, after the line

    contents[0].show();

add

    $(contents[0].up(1)).scrollTo();

Note: be careful if you're also using the accordion anywhere else on the site.