277969 - URLs with anchors scroll to incorrect position!

Status: RESOLVED DUPLICATE of bug 60307

(Firefox :: General, defect)

Description

[Jaroslaw Rafa]

I found out, that after clicking on a link that has an URL with anchor, like <a
href="page.html#anchor">...</a>, the target document is usually positioned
incorrectly.
The URL indicated is a temporary address of a document I just started to write
(a kind of FAQ for my server's users). Try clicking some of the links to the
questions (for example questions #6, #7) - sometimes the links take you to the
correct position (you may recognize you are at the correct place when you see
the text of the question you just clicked on written in brown at the top of the
screen), but usually you'll get positioned in the wrong place in the document.
After pressing the "reload" button the document re-positions to the correct place.
As I use anchors very often in my documents, this bug is very annoying to me...

Comment 1

[Jaroslaw Rafa]

Found a workaround: seems that the problem has been caused by loading of images
contained on the page. Apparently, scrolling to the anchor is performed BEFORE
all images are loaded, and position is not re-adjusted thereafter, and because
the page contents moves as the images load, we end up being incorrectly
positioned...
Adding WIDTH= and HEIGHT= attributes to ALL images on a page prevents this
problem from occurring.
Maybe the browser should re-adjust the position after everything is loaded?
(I have done just this by adding a silly instruction
onload="location.href=location.href" to the BODY tag of the page)

Comment 2

[Greg Ercolano]

(In reply to comment #1)
> Found a workaround: seems that the problem has been caused by loading 
> of images contained on the page. Apparently, scrolling to the anchor 
> is performed BEFORE all images are loaded, and position is not
> re-adjusted thereafter, 

    Yes, I just ran into this too.
    Fedora Core 2 Linux + Firefox 1.0.

    Came to the exact same conclusion and workaround separately,
    namely:

> Adding WIDTH= and HEIGHT= attributes to ALL images on a page
> prevents this problem from occurring.

    ..this is a bad workaround though; I maintain my html via a text
    editor, and don't want to have to maintain width/height values.

    Problem seems to show up best if page A refers to an anchor in page B
    that is below many images. (ie. the anchor being seeked is *below* 
    many images)

    It seems indeed the anchor position is seeked before the images
    have loaded, then as they load, the page quickly reformats, scrolling
    the anchor position away off the screen, leaving the user looking at
    some random position on the page.

    Caveats:
       Problem happens especially the first time a page loads in.
       A link to an anchor at the top of the page doesn't show it,
       but links to anchors below several images does.


       While left in the wrong position on the screen, clicking on the
       URL and hitting 'Enter' after the page has fully loaded finds the
       correct position again.

       Hitting SHIFT-RELOAD makes the problem recur, as it dumps the
       cache, forcing the same seek-anchor, image-reload, page-reformat,
       scroll-anchor-position-offscreen problem.

       The page in my test has only a little text between each image,
       and the images are all ~100k PNG files (all about 500x300 in size),
       about 8 or 10 images on the page. Very simple HTML, eg:

              <A NAME="a"></A>
              <H1>Heading A</H1>
              <UL>
                   bla bla bla
                   <P><CENTER><IMG SRC=a1.png></CENTER><P>
                   bla bla bla
                   <P><CENTER><IMG SRC=a2.png></CENTER><P>
              </UL>

              <A NAME="b"></A>
              <H1>Heading B</H1>
              <UL>
                   bla bla bla
                   <P><CENTER><IMG SRC=b1.png></CENTER><P>
                   bla bla bla
                   <P><CENTER><IMG SRC=b2.png></CENTER><P>
              </UL>
              ..
     Linking to <A HREF="#b"> shows the problem, esp. from another
     document, or when url has the #b in it, and SHIFT-RELOAD is invoked.

Comment 3

[Jaroslaw Rafa]

(In reply to comment #2)
>     Yes, I just ran into this too.

Actually, I found this problem happening in other browsers too (esp. Internet
Explorer ;-))

>        While left in the wrong position on the screen, clicking on the
>        URL and hitting 'Enter' after the page has fully loaded finds the
>        correct position again.

Yes, this is exactly what the <BODY onload="location.href=location.href"> does.
So this may be considered another workaround, but adding the WIDTH= and HEIGHT=
attributes is more elegant IMHO, as it doesn't involve unnecessary javascript,
and works regardless of whether user has javascript enabled or not.

Comment 4

[PikeUK]

Since you've identified image loading as the problem, this appears to be a
duplicate of Bug 60307, reopen if you disagree.

*** This bug has been marked as a duplicate of 60307 ***