|
Ha, thanks for the feedback. I'll address all the things I can from your list. Of the visual artefacts, only the last one makes sense to me, a lost mouseout event overtaken by events (yes, I was lazy.) Think it's possible the first two weirdnesses have to do with browser / video driver render optimizations? If you give me your OS / browser / ver / possibly graphics card, I could see if I can replicate it or do something about it. The first two kind of look like a glitch introduced by a boundary of a blur filter. The individual tiles, when blurred, have an SVG filter (feGaussianBlur stdDeviation="3,3" or "7,5") applied to them. As a performance optimization, think this SVG library (Snap, successor to RaphaelJS) sets that filter to just barely fit over the element in question. But if the elements move or if the viewport is manipulated to accommodate pan and zoom, these filters visually glitch. You start seeing parts of the blur kind of weirdly clipped off in middle of nowhere. To counter this visual glitch, I overrode the sizes of these filters to an absurd amount, going from -10000,-10000 to 10000,10000, and that fixed the initial rendering problem. But what you're showing kind of looks like a browser or library isn't honoring the set size of the blur filters and render updates from a mouse over/out are triggering a bad restoration of appearance. As to the wonky grid, think it might be partly due to scaling and integer precision of the hexagon positioning and how various transforms are applied. The positions of tiles are transforms, ints with no decimal precision, but the transformation matrix for the zoom function is very floaty. How a browser handles that intersection of numbers and precisions is magic. At some zoom levels or window proportions (when i fiddle with it), the spacing gets truncated this way and that and some of them look like they round up or down. Maybe I'll offset those pixels by 0.5 and see if there's improvement. |