Strange lines with many divs - php

Question

The problem can be shown here. I was experimenting with thousands of fixed div boxes to create a randomly generated background. I am aware this has a big impact on performance.
However, I was wondering if there was any solution to the strange white lines in the background of my webpage. I am almost 100% certain there is nothing wrong with my php & css that is determining where the boxes are placed in my background but, here it is just in-case.
define('ROWS', 100);
define('COLUMNS', 100);
$boxes = array();
for($i = 0; $i < ROWS; $i++) {
$boxes[] = array();
for($j = 0; $j < COLUMNS; $j++) {
$boxes[$i][$j] = randColor();
?>
#back<?php echo $i*COLUMNS + $j; ?> {
background: #<?php echo $boxes[$i][$j]; ?>;
width: <?php echo 100.0/COLUMNS ?>%;
height: <?php echo 100.0/ROWS ?>%;
left: <?php echo $j * 100.0/COLUMNS?>%;
top: <?php echo $i * 100.0/ROWS ?>%;
position: fixed;
z-index: -300;
}

Answer 1

Try instead using <canvas> and split the canvas up in pieces instead of divs. It is a rectangular area in a HTML file on which you can draw anything including parts.
Example: Draw a Circle
Javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Html
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>