odd Safari-specific 66-pixel line translucency bug

kirkjerk

I found a very odd bug this morning, tooling around in Processing.js, but present in p5 (which is where the action seems to be these days given pjs doesn't even work with the new Processing 3.0)

The bug happens in Safari but not Chrome or Firefox.

Roughly speaking, translucent vertical lines drawn in the left 66 pixels of the canvas or so (or top 66 pixels for horizontal lines) in Safari seem like....they're draw twice I'd say? or have "half" the proper translucency value.

I tried a lot of weird cases trying to isolate what was actually going on... in this example the only uncommented case responds to the mouse, so you can see it's based on line position, not on how many lines drawn etc.

function setup() {
  createCanvas(200,100);
  stroke(128, 128);
}

function draw() {
    background(0);
  for (var i = 0; i <= 80; i++) {
//horizontal cases
//    line(i, 0, i, 100);
   line(mouseX+i, 0, mouseX+i, 100);
//vertical cases
    //line(0, i, 100, i);
    //line(0, mouseY+i, 100, mouseY+i);
//horizontal, skip lines - same change over around 66 pixels
//(vertical would do equivalent thing)
     //line(i*2, 0, i*2, 100);
     //line(i*2 +1, 0, i*2+1, 100);
//diagonal often doesn't show, only when mouseX is 0
    //line(i+mouseX, 0, i-mouseX, 100);
}

}

Any thoughts? (I noticed it only because I was overlaying/plotting some statistical graphs (eyeballing some random number generator results)