Make a webpage where it looks like the browser is hanging / crashing

5

3

Your task today is to create a HTML page.

This page, when opened in a browser, behaves as if the browser has a problem (hanging, crashing, network error, virus, etc.)

  • You can use all the HTML(5), CSS(3) and JavaScript features you want.
  • You can't use Flash or other plugins.
  • You can't provoke a real problem in the browser (for example, you can't make the browser hang with an infinite loop, or crash with a bug exploit, etc.), just make it look like there is a problem.

Please post your source code and provide an URL to view your page, and precise on which browsers / devices it works (if specific).

I recommend http://www.c99.nl/ to host your page easily.

This is a popularity contest, so the most upvoted answer wins!

Thanks, and have fun!

xem

Posted 2014-07-24T18:23:14.260

Reputation: 5 523

I think this could have some interesting results, even though it's a very broad challenge. – nderscore – 2014-07-24T20:31:40.550

I do not see what is unclear at the moment, I voted for reopening. It is of course a broad challenge as @nderscore mentioned, all in all a rather creative task than a programming challenge and I think that this has to have its place here too. – flawr – 2014-07-24T20:49:37.707

2it seems to me challenges like this are the exact reason the admins were so hesitant to allow [tag:popularity-contest] on the site.. no real objective way to identify a "correct answer" – ardnew – 2014-07-24T23:05:11.530

@ardnew thats why its a [tag:popularity-contest], there is no right or wrong. the one with the most votes wins. – Teun Pronk – 2014-07-25T07:14:03.543

1@TeunPronk No - A popularity-contest is a competition where the correct answer with the highest vote tally (upvotes minus downvotes) wins, usually the most creative answer. Each [tag:popularity-contest] must give precise requirements such that we can judge if an answer is correct. – Howard – 2014-07-25T08:28:06.137

@Howard okay, fair enough.. my bad. On the other hand, he did give requirements even if there aren't a lot but they are there. – Teun Pronk – 2014-07-25T08:33:09.933

Wouldn't it be more fun to see who could actually crash the browser fastest with the smallest amount of code ? – adeneo – 2014-07-26T22:28:02.323

Answers

6

<html>
 <head>
  <title>Connecting...</title>
 </head>

 <body style="margin: 0px; overflow:hidden;">
  <div style="position: relative;">
   <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor:wait;"></div>
   <iframe src="http://www.wikipedia.com/" width="100%" height="100%" style="border: 0px;">
   </iframe>
  </div>
 </body>
</html>

http://c99.nl/f/64943.html

vauge

Posted 2014-07-24T18:23:14.260

Reputation: 829

neat! you could get rid of double scrollbars with overflow:hidden on the body or something like that. And use an iframe instead of object (for semanticity) – xem – 2014-07-25T10:47:20.153

That doesn't hang for me. – Isiah Meadows – 2014-07-27T08:47:16.853

cursor: wait is the trick. – Jamie – 2014-07-29T23:25:47.747

@xem thanks, I changed it as you suggested! – vauge – 2014-07-31T09:30:47.707

@vauge Works now. – Isiah Meadows – 2014-08-04T05:28:38.533

4

Better don't mess with Bond villains

Enter Blofelds secret ambush...


And in case you want to see the code: jsfiddle

After 3 seconds there will pop up a message, that the script isn't responding, but that's only an alert popup and not a real message from a hanging page. After 15 seconds there will be additional greetings from Blofeld.

izlin

Posted 2014-07-24T18:23:14.260

Reputation: 1 497

2I like it, but I get a notification of an unresponsive script which is something that shouldn't happen I believe. even though you seem to generate that yourself. – Teun Pronk – 2014-07-25T08:34:13.280

@TeunPronk No, that's supposed to happen. – undergroundmonorail – 2014-07-25T08:35:35.153

@TeunPronk I got you! That's exactly what should happen, but it's not a real warning only an alert. – izlin – 2014-07-25T09:19:01.100

I haven't used javascript in forever, but can't you use something like window.location appended with some javascript filename to make the domain appear to match? – millinon – 2014-07-25T23:38:33.160

4

Zombie Error

https://dl.dropboxusercontent.com/u/141246873/ZombieError/index.html

Note: It might take a few seconds to load due to the image file.

The webpage consists of the below html, css and javascript as well as an image file zombie.png (graphics by Clint Bellanger licensed CC-BY 3.0).

Tested in google chrome v36, but I expect it will work in most browsers.

Update:

26th Jul: Now removes zombies once they walk off the screen

28th Jul: You can now click on the zombies to blast them off the website

HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Zombie Error</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="zombie.js"></script>
</head>
<body style="margin: 0px;">
    <div style="position: relative;">
        <div style="margin: 0 auto; width:100%; height:100%;">
            <iframe src="https://godaddy.com/" style="width: 100%; height: 100%; margin: 0; border-width: 0px;"></iframe>
        </div>
    </div>
</body>
</html>

CSS:

body {
    font-family: 'Segoe UI', sans-serif;
}

span {
    font-style: italic;
}

.zombie{
    width: 78px;
    height: 78px;
    background-image: url('https://dl.dropboxusercontent.com/u/141246873/ZombieError/zombie.png');
    background-position: left;
    background-position-x: 0px;
    background-position-y: 0px;
    position: absolute;
    left: 10px;
    top: 10px;
}

body{
    overflow: hidden;
}

Javascript:

var directionWest = 0;
var directionNorth = 6;
var directionEast = 4;
var directionSouth = 2;

var stateWalking = 0;
var stateDying = 1;
var stateDead = 2;

var animWalk = {
    speed: 0.15,
    numFrames: 8,
    frames: [4, 5, 6, 7, 8, 9, 10, 11]
}

var animDying = {
    speed: 0.10,
    numFrames: 8,
    frames: [28, 29, 30, 31, 32, 33, 34, 35]
}

var spriteWidth = 128;
var spriteHeight = 128;

var spriteOffsetX = 25;
var spriteOffsetY = 25;

var spritesheetWidth = 4608;

function Zombie(_id, _x, _y, _direction) {
    this.direction = _direction
    this.id = _id;
    this.pos = { x: _x, y: _y }
    this.anim = animWalk;
    this.animFrame = 0;
    this.animDelta = 0;
    this.speed = 30;
    this.state = stateWalking;
    this.corpseDelta = 0;
    return this;
}

Zombie.prototype.Update = function (delta) {
    if (this.state == stateDead)
        return;

    //update the animation frame
    this.animDelta += delta;
    if (this.animDelta >= this.anim.speed) {
        this.animDelta -= this.anim.speed;
        this.animFrame++;
        if (this.animFrame >= this.anim.numFrames)
            this.animFrame = 0;
    }

    //background-position-x
    var div = document.getElementById(this.id);
    div.style.backgroundPositionX = ((spritesheetWidth - (spriteWidth * this.anim.frames[this.animFrame])) - spriteOffsetX) + "px";
    div.style.backgroundPositionY = ((spriteHeight * this.direction) - spriteOffsetY) + "px";

    if (this.state == stateWalking) {
        //update position
        if (this.direction == directionEast)
            this.pos.x += (this.speed * delta);
        if (this.direction == directionWest)
            this.pos.x -= (this.speed * delta);
        if (this.direction == directionNorth)
            this.pos.y -= (this.speed * delta);
        if (this.direction == directionSouth)
            this.pos.y += (this.speed * delta);
        div.style.left = Math.floor(this.pos.x) + "px";
        div.style.top = Math.floor(this.pos.y) + "px";
    }
    else if (this.state == stateDying && this.animFrame == (this.anim.numFrames - 1)) {
        this.state = stateDead;
    }
}

var zombies = []

var nextZombieID = 0;

function GetZombie(zombieID)
{
    return zombies.filter(function (z) { return z.id == zombieID })[0];
}

function ZombieClick(div)
{
    var zombie = GetZombie(div.srcElement.id);

    if (zombie.state == stateWalking) {
        zombie.state = stateDying;
        zombie.animFrame = 0;
        zombie.animDelta = 0;
        zombie.anim = animDying;
    }
}

function NewZombie()
{
    var x = 0;
    var y = 0;
    var direction = 0;

    var rand = Math.random();
    if (rand < 0.25)
    {
        //spawn from left of screen
        x = spriteWidth * -1;
        y = (Math.random() * screen.height) - spriteHeight;
        direction = directionEast;
    }
    else if (rand < 0.5) {
        //spawn from right of screen
        x = screen.width;
        y = (Math.random() * screen.height) - spriteHeight;
        direction = directionWest;
    }
    else if (rand < 0.75) {
        //spawn from top of screen
        x = (Math.random() * screen.width) - spriteWidth;
        y = spriteWidth * -1;
        direction = directionSouth;
    }
    else {
        //spawn from bottom
        x = (Math.random() * screen.width) - spriteWidth;
        y = screen.height;
        direction = directionNorth;
    }

    //generate an id
    var id = nextZombieID;
    nextZombieID++;

    //create a div
    var div = document.createElement("div");
    div.id = id;
    div.classList.add("zombie");
    div.onclick = ZombieClick;
    document.body.appendChild(div);

    //create a zombie
    zombies.push(new Zombie(id, x, y, direction));
}

var spawnRate = 1;
var spawnDelta = 0;

function spawnZombies(delta)
{
    spawnDelta += delta;
    if (spawnDelta >= spawnRate) {
        spawnDelta -= spawnRate;
        NewZombie();
    }
}

var corpseDuration = 3;

function cleanupZombies(delta)
{
    for (var i = zombies.length - 1; i >= 0 ; i--) {
        //if the zombie has walked off the screen, remove them
        if (zombies[i].pos.x < (spriteWidth * -2)
            || zombies[i].pos.x > screen.width + spriteWidth
            || zombies[i].pos.y < (spriteHeight * -2)
            || zombies[i].pos.y > screen.height + spriteHeight)
        {
            var element = document.getElementById(zombies[i].id);
            element.parentNode.removeChild(element);
            zombies.splice(i, 1);
        }

    }

    for (var i = zombies.length - 1; i >= 0 ; i--) {
        //if the zombie has died, remove their corpse after some time
        if (zombies[i].state == stateDead) {
            zombies[i].corpseDelta += delta;

            if (zombies[i].corpseDelta > corpseDuration) {
                var element = document.getElementById(zombies[i].id);
                element.parentNode.removeChild(element);
                zombies.splice(i, 1);
            }
        }
    }

}

var started = false;

var main = function () {
    var now = Date.now();
    var delta = now - then;
    if (started) {    
        cleanupZombies(delta / 1000);

        spawnZombies(delta / 1000);

        for (var i in zombies)
            zombies[i].Update(delta / 1000);
    }

    then = now;

    setTimeout(main, 30);
};

var then = Date.now();
setTimeout(main, 30);

setTimeout(function () {
    alert("Error 8102: Unexpected zombie attack. Please stand by...");
    started = true;
}, 2000)

rdans

Posted 2014-07-24T18:23:14.260

Reputation: 995

3

Redirect to about:crash, which shows the default crash screen on Chrome [won't work on modern versions of Chrome, Firefox, or other browsers]:

enter image description here

<meta http-equiv="refresh" content="0; url=about:crash">

It probably doesn't qualify as a "full HTML page", but it will be rendered correctly by Chrome.
To try it, type this into the Chrome address bar:

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDsgdXJsPWFib3V0OmNyYXNoIj4=

I couldn't test this answer because I don't have a Chrome install handy, please remove this notice once you test it.

Giulio Muscarello

Posted 2014-07-24T18:23:14.260

Reputation: 298

I tried putting that text in the address bar of Chromium (mostly the same as Chrome), but it just resulted in a page with the contents PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDsgdXJsPWFib3V0OmNyYXNoIj4= – Ian D. Scott – 2014-07-25T18:26:13.260

@IanD.Scott Whoops! I accidentally typed content rather than base64. I edited my answer. – Giulio Muscarello – 2014-07-26T15:19:23.750

3Your base64 just redirects me to about:blank. – Doorknob – 2014-07-29T00:20:00.997

1

Glitchy scroll

No, that's not bad image compression. Unintended side effect from something else I was trying.

Try it out with the link in the title; The page starts looking weird while you scroll, and the scroll should become very jittery after a while. I think you need font smoothing of some sort activated, but everyone has this nowadays, right? The screenshot is from Chrome on OS X.

Imgur

The jQuery code:

$( window ).scroll(function() {
    $('#main').clone().prependTo('body');
});

daniero

Posted 2014-07-24T18:23:14.260

Reputation: 17 193

1

HTML + CSS + JavaScript/jQuery/jQuery UI

This simulates a Windows error dialog. (It drags, too!) Like all good error messages, it fulfills two main requirements:

  1. It displays a cryptic error message meaning nothing to all but a few.
  2. The buttons seem to do nothing when clicked except show the wait cursor.

See it in action at http://codepen.io/anon/pen/onbAi. (JSFiddle was not loading jQuery UI well.) It should display reasonably well on all browsers.

<!DOCTYPE html><html>
<head><style>
body {
  font: 11px sans-serif;
}
#window {
  background-color: #ECE9D8;
  padding: 3px;
  width: 574px;
  margin: 20px auto 0 auto;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
header {
  background-color: #1E74EF;
  background-image: -moz-linear-gradient(left, #003ac9 0%, #4492e5 100%);
  background-image: -webkit-linear-gradient(left, #003ac9 0%, #4492e5 100%);
  background-image: linear-gradient(to right, #003ac9 0%, #4492e5 100%);
  clear: both;
  padding: 3px;
}
p {
  margin-left: 60px;
}
h1 {
  font: bold 13px sans-serif;
  color: white;
  margin: 1px;
}
button {
  background-color: #ECE9D8;
  outline: none;
  cursor: inherit;
}
#close {
  float: right;
  font-size: 16px;
  font-weight: bold;
  padding: 0 2px;
  margin: 0;
  text-align: center;
  height: 18px;
  line-height: 16px;
}
#ok {
  width: 75px;
  height: 23px;
  margin: 0 auto;
  margin-bottom: 13px;
  display: block;
}
</style></head><body>
<div id="window">
  <header>
    <button id="close" title="Close">×</button>
    <h1><span id="browser"></span>Application Error</h1>
  </header>
  <p>The instruction at "</span>" referenced memory at "<span class="hex"></span>". The memory could not be "read".</p>
  <p>Click on OK to terminate the program</p>
  <button id="ok">OK</button>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'></script>

$('#window').draggable({handle:'header'});

function randomHex(){
  return '0x'+(Math.floor(Math.random()*0xffffffff)).toString(16);
}

$('.hex').each(function(){
  $(this).text(randomHex());
});

var reg = /(opera|chrome|safari|firefox|msie)/i,
    browser = navigator.userAgent.match(reg)[0].toLowerCase();
if(!browser){
  browser = 'firefox';
} else if(browser == 'msie'){
  browser = 'ie';
}
$('#browser').text(browser + '.exe - ');

$('button').click(function(){
  $('html, body').css('cursor','wait');
});
</script>
</body></html>

NinjaBearMonkey

Posted 2014-07-24T18:23:14.260

Reputation: 9 925

0

I've tested this on my smartphone. I can't get it to load properly on c99.nl, though. Must be that obscure.

It makes your browser look possessed with some sort of obscure virus affecting the loading bar.

<!DOCTYPE html>
<script>
window.location.href = document.location.href;
</script>
<title>Redirecting...</title>
<h3>Redirecting...</h3>

Notes:

  1. This can easily be tested locally by copying it into a plain text file, and the name or place doesn't matter beyond file extension. It is valid HTML5 + JavaScript (you can see for yourself here...only warning is missing <meta charset=utf-8 />).

  2. Make sure that if you test it, especially on a mobile device, stop the loading loop first (same as cancelling a page load) before you exit, or it may crash. (I learned this the hard way...)

In case you hadn't noticed, it's continually redirecting to the same page. window.location.href and document.location.href are synonymous, so it's assigning the current location to its synonym. It could look like server lag or a browser hang, depending on the browser and largely it's caching mechanism.

That last line is just for theme.

Isiah Meadows

Posted 2014-07-24T18:23:14.260

Reputation: 1 546

Actually, it is valid HTML5, barring the missing <title> tag (which is fixed). – Isiah Meadows – 2014-07-31T04:30:23.373

@Sieg You can omit the <html>, <head>, <body>, and <meta charset="utf-8" /> tags in HTML5. You can also omit 99% of the otherwise-important stuff in the <!DOCTYPE> tag, permitting the iconic <!DOCTYPE html> declaration for HTML5 instead of the lengthy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> for HTML 4.01 Strict. – Isiah Meadows – 2014-07-31T04:44:01.900

0

data:text/html, <meta http-equiv="refresh" content="0"><script>document.write("Error Code : " + (Math.floor(Math.random() * 10000)  % 1000) + ". Description: Network connection error.")</script>

The error code keeps changing, and the computer goes noisy.

Jamie

Posted 2014-07-24T18:23:14.260

Reputation: 166

0

Simulates an lagging loading spinner

http://c99.nl/f/104794.html

Sourcecode: http://jsfiddle.net/3QURA/2/

HTML:

<div id="loader" style="">
<br/>
<div id="spinner">&nbsp;</div>
<br/>
<br/>
Loading...
</div>

CSS:

body,html {
    width:100%;
    height:100%;
    margin:0;
    color:white;
}
#spinner {
    background:transparent;
    width:100px;
    height:100px;
    left:calc(50% - 100px / 2);
    position:relative;
    -webkit-animation: load infinite 1s;
    -webkit-border-radius: 100%;
    border-right:white 8px solid;
}
@-webkit-keyframes load {
    0% { -webkit-transform:rotate(0deg) }
    100% { -webkit-transform:rotate(360deg) }
}
.paused {
    -webkit-animation-play-state:paused;
}
#loader {
    font-family:Helvetica Light, Helvetica Neue, Helvetica, Arial, sans-serif;
    left:0%;
    position:fixed;
    text-align:center;
    background:rgba(55,55,55,0.5);
    width:100%;
    height:100%;
}

JavaScript and jQuery:

window.setInterval(update, 1000/2);
function update() {
window.setTimeout(function () {
    $("#spinner").addClass("paused");
},1000);
window.setTimeout(function () {
    $("#spinner").removeClass("paused");
},1200);
}

CocoaBean

Posted 2014-07-24T18:23:14.260

Reputation: 309

0

Chrome Crash Page

Actual Link: chrome://crash/

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAQAAABJXchjAAAAjklEQVR4Xu3ZgQbAIAAG4d7/pbeJxJCOWf26DozSh0RWrg0aAESIEEEtxJ6E6ICZUXrTc7MQZID5pyFEiPiwAMQPNYiIpyBEAwIoWBOEAACwJhHhmfCeEEH17++DEPwRlI/giRAhoow7ANE2gchkBN8c4GMQNI6JRHhjiqitAOyEWPsXqkq2QSxNhAgR4269KKbHaOQ5OgAAAABJRU5ErkJggg==" alt="Crash">
  <div>Aw, Shit!</div>
  <p>This page is really fucked up, run for the hills.</p>
  <button>Reload</button>
  <p>If it doesn't work, it's all your fault.</p>
</body>
</html>

CSS

html, button {
  user-select: none;
  cursor: wait;
  font-family: Calibri, Sans-serif;
  text-align: center; 
}
body {
  padding-top: 120px;
  background: #212e3d; 
  font-size: 80%;
  color: white;  
}
button {
  font-family: Calibri, Sans-serif;
  padding: 5px 10px;
}
div {
  font-size: 140%;
}

rafaelcastrocouto

Posted 2014-07-24T18:23:14.260

Reputation: 315