Bug 118809 – onegameamonth.com site makes safari unresponsive

• Status: RESOLVED
• Resolution: INVALID
• Component: New Bugs

[Arthur Langereis]

The site http://onegameamonth.com/ changes UI every month, but every month there is an animation with optional interaction.
This month it's really easy, layer some translucent pictures and move them linearly over time.

PROBLEM
--------
Safari/Webkit Nightly, when faced with this page, becomes unresponsive. The offending script is included below.
It's this piece, if I turn off JS, load the site, then turn back on JS and eval() this code, the problems start.

The problem is the same in Safari 6.0.5 on Mac OS X 10.8.4, the latest Webkit Nightly and also in Safari 7 on 10.9b3.
Firefox and Chrome handle the page just fine.

I think this is a serious problem as the page becomes unresponsive while it seemingly uses normal animation techniques.


DESIRED BEHAVIOUR
-----------------
normal operation of the webpage, hovering, clicking, etc.


ACTUAL BEHAVIOUR
-----------------
Cannot interact with web page, spinning beach balls of doom, the web inspector cannot be opened, no hovers register, etc.
Scrolling does work normally.

The page acts as expected if the animation setup script has not been run.


OFFENDING SCRIPT
----------------

var sbg1 = document.getElementById('scroller1');
var sbg2 = document.getElementById('scroller2');
var sbg3 = document.getElementById('scroller3');
var sbg4 = document.getElementById('scroller4');
var bgx = 0;
function skyscroller()
{
	bgx--;
	if (sbg1) sbg1.style.backgroundPosition = Math.round(bgx/2) + 'px 0px';
	if (sbg2) sbg2.style.backgroundPosition = -bgx + 'px 0px';
	if (sbg3) sbg3.style.backgroundPosition = bgx*2 + 'px 0px';
	if (sbg4) sbg4.style.backgroundPosition = -bgx*3 + 'px 0px';
}

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

(function animloop(){
  requestAnimFrame(animloop);
  skyscroller();
})();

[Arthur Langereis]

BTW, I am not the owner/maintainer of onegameamonth.com, just a visitor/user of the site.

[Alexey Proskuryakov]

Hmm, I cannot reproduce this. The page freezes for a few seconds on load, but works fine thereafter.

[Simon Fraser (smfr)]

Seems OK to me too.

[Arthur Langereis]

People, I'm very sorry, I made a beginner's mistake.

This is the 2nd time I spent time chasing ghosts because of the 1 safari extension I have (ClickToPlugin)  causing weird behaviour. I have no idea why ClickToPlugin would interfere with these things but it did. I should have checked. My bad, please move on, nothing to see here.

[Alexey Proskuryakov]

Thank you for following up! Can you contact the extension author? It's really not OK when popular extensions break sites.

[Arthur Langereis]

I may have spoken a bit too soon in my presumed embarrassment as I got another beach ball on my profile 
page in Webkit just now with extensions turned off completely.

Now, sometimes when I try to select text or otherwise interact with the page I get no feedback and/or short beach balls, but sometimes not and this time I do really have extensions turned off.

If I scroll down far enough that the top section of the page is not handled by Safari anymore everything works fine but as soon as I get even close to the area with the animation and the SoundCloud player, trying to select first does just nothing and persisting will give me beach balls again. However, after a few seconds on one computer it regains control and works normally… most of the time.

Right now it's erratic, sometimes I get unresponsiveness, sometimes I don't. Even between reload and restarts of Safari. I can't put my finger on it, but I do know something weird is going on.

One thing is certain though, my MBAir gets rather steamy after a few minutes of looking at that page. Looking at activity viewer, a ton of cpu and energy usage, for a couple of transparent images…

Sorry for all the spam, first I thought this was easy, then a mistake and now it's just weird.
If anyone can confirm that the page __can__ get unresponsive when trying to interact with it in the scroll area at the top then I know I'm not going insane. But maybe this is too erratic to act on.