From db7105497854398e7100539020c740d85222a996 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Thu, 26 Sep 2019 09:41:59 -0700
Subject: [PATCH] Addressing seams in transparent images on Firefox

---
 src/tile.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/tile.js b/src/tile.js
index aca41e1c..74746165 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -353,8 +353,15 @@ $.Tile.prototype = {
         //an image with an alpha channel, then the only way
         //to avoid seeing the tile underneath is to clear the rectangle
         if (context.globalAlpha === 1 && this._hasTransparencyChannel()) {
-            //clearing only the inside of the rectangle occupied
-            //by the png prevents edge flikering
+            if ($.Browser.vendor === $.BROWSERS.FIREFOX) {
+                // Round to the nearest whole pixel so we don't get seams from overlap. This is only
+                // an issue on Firefox, so we only do it there.
+                position.x = Math.round(position.x);
+                position.y = Math.round(position.y);
+                size.x = Math.round(size.x);
+                size.y = Math.round(size.y);
+            }
+
             context.clearRect(
                 position.x,
                 position.y,