CODEWITHSUNDEEP
safarigoogle-chrome
Majid Fouladpour
Majid Fouladpour

Reputation: 30252

Why does this page scroll down to the bottom automatically?

This happens only with Google Chrome and Safari. This is the page in question: http://jqeedu.tuxfamily.org/pmr/

After opening the landing, click on post your apartment, a form is loaded via ajax, and the page automatically scrolls to the bottom and if you scroll up, it returns to the bottom again!

What is causing this?

Edit:
Sorry about this but I waited a few hours and then as it had to be fixed started experimenting with it and changed several things and ultimately fixed the issue. What I learned during the process is this:

  1. I had an zero-width-and-height iframe on the page which served as the target for upload form, so that we could upload photos without page refresh. This iframe was the last element in the body. When I changed its place to top, the scrolling changed from insisting on the bottom position to insisting on page top position. Now the page wouldn't allow you to scroll down the page!
  2. That was good news, because now I knew whatever it was, it was caused by the iframe. The src attribute of the iframe was set to #; I suspected this, and changed it to point to a real file (a blank html frame), made the file and the problem disappeared!

So, my analysis is this: The browser gets stuck on loading the file into the iframe and the process responsible for loading the content is left running. This process somehow does not let us scroll to an area where the iframe would go out of the viewport. This is a misbehavior of webkit engine and browsers built with webkit demonstrate this issue.

Finally, this is the snippet below shows the code of the iframe before and after the change, and the content of the new target file.

Buggy:

<iframe id="control_target" name="control_target" src="#"
 style="width:0;height:0;border:0px solid #fff;"></iframe>

Good:

<iframe id="control_target" name="control_target" src="blank.html" 
style="width:0;height:0;border:0px solid #fff;"></iframe>

blank.html:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body> </body>
</html>

Finally, I do not like to mark my own answer as accepted answer, so I put this in the body of the question, I wait for someone to explain a bit more about the nature of this issue or provide a better analysis. If such answer is provided, I'll mark it as the accepted answer.

Upvotes: 3

Views: 10664

Answers (1)

Tim Hettler
Tim Hettler

Reputation: 1256

Works fine in Safari 5, as well. Maybe an element at the bottom of your form is receiving focus, which would cause the page to scroll.

Upvotes: 3

Related Questions