Anchor link not working in Firefox

I have a form in a Bootstrap section half way down my page. When the submit button is pressed the page refreshes and the input values are displayed on the same section. I have a link and an associated id, and in Chrome the user is taken to the form section on the page refresh. However in Firefox they are taken higher up the page. Can anyone advise why this could be happening and how to fix it?

Can you show us the page where this happens? We need to see code.

This is the demo page…

It seems to land you on the “general vicinity” of the #pricinglink fragment, but not bang on it as you would expect. I’m not sure why, but I see the ID is placed on the h2 header, maybe it would be better on the parent section.

[off-topic] The site is very slow loading, images seem to be the main culprit. You need to do some serious image optimisation before this goes live. For example there is a “Civic Yearbook” logo PNG (233 x 100px) which is 523KB which defies belief. A graphic image at that size in PNG should be a fraction of that data size. Just loading it into Photshop and re-saving brings it down to 20KB, that is without optimising the palette. That’s just one of 31 image requests.[/off-topic]

Edit: When I do adjust the palette it’s just below 9KB, that’s about 1.7% of the original size with no discernible loss in quality.


Thanks SamA74. I’ve tried the #pricinglink fragment in a few places but will give it another go. Strangely, in Chrome it works perfectly.
(I appreciate your advice with the site speed but the site is nowhere near going live, and the images all need optimising. This is just the first stage of dev. It should be much faster by the next stage. )

1 Like

Gets stranger…I moved the #pricinglink id to below the form and it worked in Firefox but then it was way off in Chrome.

I gave up trying to please the browsers and found a better way to do this without refreshing the page.

I have seen differences in scrolling behaviour in Firefox and chromium in the past, especially one case where Firefox put the destination right at the top of the page (which ended up being under a sticky header) while chromium set the destination more in the middle (and so happened to avoid the sticky header). I don’t think web developers have a whole lot of control over this.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.