Skip to content

Commit

Permalink
Better browser workarounds.
Browse files Browse the repository at this point in the history
Rollback commit 73168a7, which didn't entirely solve the problem for Firefox and
introduced new artifacts in WebKit browsers. The root problem is that Firefox
positions the SVG image with subpixel accuracy (as evinced by getScreenCTM()
returning subpixel values for the `e` and `f` attributes), and so even if the
SVG internally positions images at even pixel boundaries, Firefox still has
anti-aliasing artifacts. A proper solution to this problem is trickier than I
thought, and since it's only a minor aesthetic problem I'm going to ignore it
for now.

The `wheel` control now triggers the wheel speed dampening if a single large
wheelDelta is seen, rather than trying to compute a moving average of the wheel
speed. This means that false positives are more annoying, but false negatives
are significantly less likely, so this should be a significant improvement for
Safari and Chrome.

Lastly, there's a workaround for the broken getScreenCTM in WebKit browsers when
the window is scrolled! Hooray.
  • Loading branch information
Mike Bostock committed Aug 26, 2010
1 parent a4960b4 commit 86a1b8a
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 74 deletions.
41 changes: 28 additions & 13 deletions polymaps.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ if (!org) var org = {};
if (!org.polymaps) org.polymaps = {};
(function(po){

po.version = "2.0.2"; // semver.org
po.version = "2.0.2+1"; // This fork not semver!

var zero = {x: 0, y: 0};
po.id = (function() {
Expand Down Expand Up @@ -451,8 +451,21 @@ po.map = function() {

map.mouse = function(e) {
var point = (container.ownerSVGElement || container).createSVGPoint();
point.x = e.clientX;
point.y = e.clientY;
if ((bug44083 < 0) && (window.scrollX || window.scrollY)) {
var svg = document.body.appendChild(po.svg("svg"));
svg.style.position = "absolute";
svg.style.top = svg.style.left = "0px";
var ctm = svg.getScreenCTM();
bug44083 = !(ctm.f || ctm.e);
document.body.removeChild(svg);
}
if (bug44083) {
point.x = e.pageX;
point.y = e.pageY;
} else {
point.x = e.clientX;
point.y = e.clientY;
}
return point.matrixTransform(container.getScreenCTM().inverse());
};

Expand Down Expand Up @@ -640,6 +653,9 @@ po.map.coordinateLocation = function(c) {
lat: y2lat(180 - k * c.row)
};
};

// https://bugs.webkit.org/show_bug.cgi?id=44083
var bug44083 = /WebKit/.test(navigator.userAgent) ? -1 : 0;
po.layer = function(load, unload) {
var layer = {},
cache = layer.cache = po.cache(load, unload).size(512),
Expand Down Expand Up @@ -673,7 +689,7 @@ po.layer = function(load, unload) {

// set the layer transform
container.setAttribute("transform",
"translate(" + (mapSize.x >> 1) + "," + (mapSize.y >> 1) + ")"
"translate(" + (mapSize.x / 2) + "," + (mapSize.y / 2) + ")"
+ (mapAngle ? "rotate(" + mapAngle / Math.PI * 180 + ")" : "")
+ (mapZoomFraction ? "scale(" + Math.pow(2, mapZoomFraction) + ")" : "")
+ (transform ? transform.zoomFraction(mapZoomFraction) : ""));
Expand All @@ -685,9 +701,9 @@ po.layer = function(load, unload) {
c3 = map.pointCoordinate(tileCenter, {x: 0, y: mapSize.y});

// round to pixel boundary to avoid anti-aliasing artifacts
if (!transform && !mapAngle && !mapZoomFraction) {
tileCenter.column = Math.round(tileSize.x * tileCenter.column) / tileSize.x;
tileCenter.row = Math.round(tileSize.y * tileCenter.row) / tileSize.y;
if (!mapZoomFraction && !mapAngle && !transform) {
tileCenter.column = (Math.round(tileSize.x * tileCenter.column) + (mapSize.x & 1) / 2) / tileSize.x;
tileCenter.row = (Math.round(tileSize.y * tileCenter.row) + (mapSize.y & 1) / 2) / tileSize.y;
}

// layer-specific zoom transform
Expand Down Expand Up @@ -1253,8 +1269,6 @@ po.wheel = function() {
timePrev = 0,
smooth = true,
location,
speedBug = /WebKit\/533/.test(navigator.userAgent),
speedAvg = .3,
map;

function move(e) {
Expand All @@ -1264,10 +1278,8 @@ po.wheel = function() {
function mousewheel(e) {
var delta = Math.max(-1, Math.min(1, (e.wheelDelta / 120 || -e.detail) * .1)),
point = map.mouse(e);
if (speedBug) {
speedAvg = speedAvg * .95 + Math.abs(delta) * .05;
if (speedAvg > .5) delta *= .4;
}
if ((bug40441 < 0) && (Math.abs(e.wheelDelta) >= 4800)) bug40441 = 1;
if (bug40441 == 1) delta *= .1;
if (!location) location = map.pointLocation(point);
map.off("move", move);
if (smooth) {
Expand Down Expand Up @@ -1304,6 +1316,9 @@ po.wheel = function() {

return wheel;
};

// https://bugs.webkit.org/show_bug.cgi?id=40441
var bug40441 = /WebKit\/533/.test(navigator.userAgent) ? -1 : 0;
po.arrow = function() {
var arrow = {},
key = {left: 0, right: 0, up: 0, down: 0, plus: 0, minus: 0},
Expand Down
Loading

0 comments on commit 86a1b8a

Please sign in to comment.