Chrome Scrolling by itself

[astralaaron]

I am using a javascript to display a clock on a website I am working on. I just noticed that if i load the page on Chrome, every time the clock updates, the page scrolls all the way down...the weird thing is that it is only doing it on one specific page, the script works fine on other pages.

 

This is the script for the clock:

function updateClock ( ){	var months = new Array('January','February','March','April','May','June','July','August','October','November','December');	var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');	function endings( date ) {		var end = '';		switch(date) {			case 1:case 21:end = 'st';break;			case 2:case 22:end = 'nd';break;			case 3:case 23:end = 'rd';break;			default:end = 'th';break;		}		return end;	}  var currentTime = new Date ( );  var currentHours = currentTime.getHours ( );  var currentMinutes = currentTime.getMinutes ( );  var currentSeconds = currentTime.getSeconds ( );  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;  var ampm = ( currentHours < 12 ) ? "AM" : "PM";  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;  currentHours = ( currentHours == 0 ) ? 12 : currentHours;  var currentTimeString =  "<span>" + currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + ampm + "</span> on " + days[currentTime.getDay()] + " " + currentTime.getDate() + endings() + " " + months[currentTime.getMonth()] + " " + currentTime.getFullYear();  document.getElementById("clock").innerHTML = currentTimeString;  window.setTimeout(function(){updateClock();},'1000');}

I was up all night last night trying to fix it, I'm getting no where. it is definitely happening every time the setTimeout fires.. At first I had the setTimeout written like this: window.setTimeout(updateClock,'1000'); both ways the same thing happens.

 

Has anyone ever had an issue like this? Anyone have any tips to pin point what is causing the problem?

 

EDIT:

I am pretty sure the only difference on this page is that I use a jquery plugin to crop images (jcrop) I tried including the files on the other pages to see if the same problem would happen, but it doesn't happen.

Edited November 21, 2014 by astralaaron

[astralaaron]

I found the problem, wow it is strange.

 

I have an iframe on the page that I am using in my "ajax" image upload.. In my iframe src="" tag i had a "#". (src="#") removing the src fixes the problem..if I add the src="#" the page scrolls all the way down when the page loads, and then every time the setTimeout() is called.

 

Really strange, anyway no more problems..but does anyone know why that was happening?

[justsomeguy]

It doesn't look like there's anything in that code which should change the position of the page. Using the hash for a source isn't a great practice, but I don't see a reason why that function would trigger navigation.

[astralaaron]

Using the hash for a source isn't a great practice, but I don't see a reason why that function would trigger navigation.

If you don't need a src for the iframe and are just using the iframe for an image upload, would you just not write an SRC at all? Now I am not putting an SRC tag at all and its working fine.

 

I was reading around and found discussion about iframes causing random elements to scroll when they have fragmented URL's ( http://stackoverflow.com/questions/26017978/iframe-causes-parent-elements-to-scroll-up-on-google-chrome-when-url-contains-fr )

[justsomeguy]

Yeah, when I'm using hidden iframes or something similar I don't give a src.