Thin lines appearing between tiles about polymaps

[jasondavies]

Just noticed the commit comment in 86a1b8a that mentions this.

[mbostock]

See WebKit Bug 35211 for more information. There are some clumsy workarounds, such as using 257x257 tiles that overlap by 1 pixel, or rounding images to exact pixel boundaries, but it's difficult to get right.

[RandomEtc]

I have some experience mitigating this issue in Modest Maps. Modest Maps JS avoids this using position and size rounding as Mike describes, but there isn't a complex transform stack at play there so it was easier to implement. It does introduce some visual stability issues when smoothly animating the zoom, but in general I think it looks better. If anyone wants to take this on in a fork/branch I'll gladly help out with testing and merging.

[jasondavies]

Sounds interesting. Am I right in thinking we need to detect and round fractional pixel positions that result from the container transforms applied here? https://github.com/jasondavies/polymaps/blob/master/src/Layer.js#L72

As well as the individual tile transforms applied further down. For integral zooms this can be done, but I'm not sure about fractional zooms, any ideas?

As for the 1px overlap hack, is that simple to use? I've generated a huge tileset of 256x256 tiles so I'd rather set the tile size in polymaps than regenerate the tileset. I've tried map.tileSize({x: 255, y: 255}) but this doesn't seem to work.

[RandomEtc]

Yeah the desired end result is to round the screen coordinates (the full concatenated transform) of the tiles down to pixel values, and then round up the scale of the tiles (again, full concatenated transform) to the nearest pixel. I'm not completely familiar with how the stack of transforms gets generated but you can see some tile level positioning happening further down at https://github.com/jasondavies/polymaps/blob/master/src/Layer.js#L210 as well.

[palewire]

I've seen this with a couple different tilesets, especially in Firefox on Ubuntu. Bummer.

[jasondavies]

I got the overlapping hack to work, but I had to tweak po.image:

--- a/src/Image.js
+++ b/src/Image.js
@@ -5,8 +5,8 @@ po.image = function() {
   function load(tile) {
     var element = tile.element = po.svg("image"), size = image.map().tileSize();
     element.setAttribute("preserveAspectRatio", "none");
-    element.setAttribute("width", size.x);
-    element.setAttribute("height", size.y);
+    element.setAttribute("width", size.x+1);
+    element.setAttribute("height", size.y+1);

     if (typeof url == "function") {
       element.setAttribute("opacity", 0);

Perhaps we should expose the image tile size via .tileSize() in a similar way to po.map? The only reason I can think of is to implement the overlapping hack, but it might be useful for something else.

[jasondavies]

Still curious about whether it's even possible to implement this for fractional scale() transforms. As I understand it, even if we round the image positions to the nearest pixel, there's still the problem of the fractional scale() transform, which presumably turns the rounded positions into non-integer values, leading to the subpixel bug again.

Perhaps the scale() transform should also be rounded, this time to the nearest 1/256th?

[jasondavies]

See #65 for my fix.