Why doesn't this script work in Chrome?

Question

This is an old script I used some time ago. Now I noticed that, when added to my personal website, https://andreaconsole.altervista.org, it still works in IE but not with Chrome. On the other hand, it works as a snippet. The Chrome tools for webmasters don't show any error: can you see the reason?

var speed = 30; // lower number for faster
var flakes = 60; // number of flakes
var flake_image = "https://andreaconsole.altervista.org/immagini/snowstorm/snow.gif"; // location of snowflake graphic
var xmasstartday = 8;
var xmasstartmonth = 10;
var xmasstopday = 8;
var xmasstopmonth = 0;
//check if we are on xmas time
var datenow = new Date();
var monthnow = datenow.getMonth();
var daynow = datenow.getDate();
if (!(((monthnow == xmasstartmonth) && (daynow >= xmasstartday)) || ((monthnow == xmasstopmonth) && (daynow <= xmasstopday)))) {
  throw new Error('This is not an error. This is just to abort javascript');
}

/***************************\
*Winter Drifting Snow Effect*
*(c) 2006   mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
/* prelevato ed illustrato su Web-Link.it 
 ******************************************/
var swide, shigh;
var dx = new Array();
var xp = new Array();
var yp = new Array();
var am = new Array();
var sty = new Array();

window.onload = function() {
  if (document.getElementById) {
    var k, f, b;
    b = document.createElement("div");
    b.style.position = "absolute";
    b.setAttribute("id", "bod");
    document.body.appendChild(b);
    set_scroll();
    set_width();
    for (var i = 0; i < flakes; i++) {
      dx[i] = 0;
      am[i] = Math.random() * 20;
      xp[i] = am[i] + Math.random() * (swide - 2 * am[i] - 25);
      yp[i] = Math.random() * shigh;
      sty[i] = 0.75 + 1.25 * Math.random();
      f = document.createElement("div");
      f.style.position = "absolute";
      f.setAttribute("id", "flk" + i);
      f.style.zIndex = i;
      f.style.top = yp[i] + "px";
      f.style.left = xp[i] + "px";
      k = document.createElement("img");
      k.src = flake_image;
      f.appendChild(k);
      b.appendChild(f);
    }
    setInterval("winter_snow()", speed);
    window.onresize = set_width;
    window.onscroll = set_scroll;
  }
}


function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide = document.documentElement.clientWidth;
    shigh = document.documentElement.clientHeight;
  } else if (typeof(self.innerHeight) == "number") {
    swide = self.innerWidth;
    shigh = self.innerHeight;
  } else if (document.body.clientWidth) {
    swide = document.body.clientWidth;
    shigh = document.body.clientHeight;
  } else {
    swide = 800;
    shigh = 600
  }
}


function set_scroll() {
  var sleft, sdown;
  if (typeof(self.pageYOffset) == "number") {
    sdown = self.pageYOffset;
    sleft = self.pageXOffset;
  } else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown = document.body.scrollTop;
    sleft = document.body.scrollLeft;
  } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft = document.documentElement.scrollLeft;
    sdown = document.documentElement.scrollTop;
  } else {
    sdown = 0;
    sleft = 0;
  }
  document.getElementById("bod").style.top = sdown + "px";
  document.getElementById("bod").style.left = sleft + "px";
}

function winter_snow() {
  for (var i = 0; i < flakes; i++) {
    yp[i] += sty[i];
    if (yp[i] > shigh - 30) {
      xp[i] = am[i] + Math.random() * (swide - 2 * am[i] - 25);
      yp[i] = 0;
      sty[i] = 0.75 + 1.25 * Math.random();
    }
    dx[i] += 0.02 + Math.random() / 10;
    document.getElementById("flk" + i).style.top = yp[i] + "px";
    document.getElementById("flk" + i).style.left = (xp[i] + am[i] * Math.sin(dx[i])) + "px";
  }
}

PS: the editor keeps asking me for more details, but I have no more details to add. Should I simply add random text to make him happy?

Satpal, did you try the code or my website? I see that the code works, but not on my website... Caster, I tried but it didn't work — andreaconsole
– andreaconsole, Commented Nov 22, 2017 at 9:54
The snowflake images are being rendered with zero width and height — phuzi
– phuzi, Commented Nov 22, 2017 at 10:05
Thank you phuzi, you found the problem! Now I have to understand the cause, i.e. which css directive is influencing the size of the flakes, for instance. — andreaconsole
– andreaconsole, Commented Nov 22, 2017 at 10:14

phuzi · Accepted Answer · 2017-11-22 10:14:45Z

3

The snowflakes are being rendered with zero height and width in Chrome 62.

Add the following lines to explicitly set them,probably just below the

f.style.width = "25px";
f.style.height = "25px";

So your onload function becomes:

window.onload = function() {
    if (document.getElementById) {
        var k, f, b;
        b = document.createElement("div");
        b.style.position = "absolute";
        b.setAttribute("id", "bod");
        document.body.appendChild(b);
        set_scroll();
        set_width();
        for (var i = 0; i < flakes; i++) {
            dx[i] = 0;
            am[i] = Math.random() * 20;
            xp[i] = am[i] + Math.random() * (swide - 2 * am[i] - 25);
            yp[i] = Math.random() * shigh;
            sty[i] = 0.75 + 1.25 * Math.random();
            f = document.createElement("div");
            f.style.position = "absolute";
            f.setAttribute("id", "flk" + i);
            f.style.zIndex = i;
            f.style.top = yp[i] + "px";
            f.style.left = xp[i] + "px";

            // Explicitly set height and width
            f.style.width = "25px";
            f.style.height = "25px";

            k = document.createElement("img");
            k.src = flake_image;
            f.appendChild(k);
            b.appendChild(f);
        }
        setInterval("winter_snow()", speed);
        window.onresize = set_width;
        window.onscroll = set_scroll;
    }
}

answered Nov 22, 2017 at 10:14

phuzi

13.3k4 gold badges30 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

andreaconsole Over a year ago

It works, but I would like to understand if it is the consequence of a conflicting directive in my CSS or a Chrome "feature" (which is unlikely, since the snippet above works in Chrome). Anyhow, thank you for the answer!

phuzi Over a year ago

@andreaconsole I can't see anything in the CSS that has "broken" this. I think it's probably just a difference in the default rendering/styling of an img inside a div where no explicit width/height is set between the two browsers.

Collectives™ on Stack Overflow

Why doesn't this script work in Chrome?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related