Adjust Mapillary styles for cross browser support

css/map.css

@@ -1560,28 +1560,28 @@ text.gpx {
     pointer-events: none;
 }
 
-.layer-mapillary-signs body {
-    min-width: 30px;
+.layer-mapillary-signs .icon-sign body {
+    min-width: 20px;
+    height: 28px;
+    width: 28px;
+    border: 2px solid transparent;
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
+    z-index: 70;
 }
 
-.layer-mapillary-signs .icon-sign {
-    height: 32px;
-    width: 32px;
-    border: 2px solid transparent;
-}
-
-.layer-mapillary-signs .icon-sign:hover {
+.layer-mapillary-signs .icon-sign:hover body {
     border: 2px solid rgba(255,198,0,0.8);
-}
+    z-index: 80;
+ }
 
-.layer-mapillary-signs .icon-sign.selected {
+.layer-mapillary-signs .icon-sign.selected body {
     border: 2px solid rgba(255,0,0,0.8);
-}
+    z-index: 80;
+ }
 
-.layer-mapillary-signs .t {
+.layer-mapillary-signs .icon-sign .t {
     font-size: 28px;
     z-index: 70;
     position: absolute;

js/id/renderer/map.js

@@ -38,7 +38,7 @@ iD.Map = function(context) {
             .attr('id', 'supersurface');
 
         // Mapillary streetsigns require supersurface transform to have
-        // a value in order to do correct foreignObject positioning..
+        // a value in order to do correct foreignObject positioning in Chrome
         iD.util.setTransform(supersurface, 0, 0);
 
         // Need a wrapper div because Opera can't cope with an absolutely positioned

js/id/renderer/mapillary_sign_layer.js

@@ -23,7 +23,7 @@ iD.MapillarySignLayer = function(context) {
     }
 
     function showLayer() {
-        layer.style('display', 'block')
+        layer.style('display', 'block');
         debouncedRedraw();
     }
 
@@ -64,11 +64,17 @@ iD.MapillarySignLayer = function(context) {
             .data(data, function(d) { return d.key; });
 
         // Enter
-        signs.enter()
+        var enter = signs.enter()
             .append('foreignObject')
             .attr('class', 'icon-sign')
+            .attr('width', '32px')      // for Firefox
+            .attr('height', '32px');    // for Firefox
+
+        enter
             .append('xhtml:body')
-            .html(mapillary.signHTML)
+            .html(mapillary.signHTML);
+
+        enter
             .on('click', function(d) {   // deselect/select
                 if (d.key === mapillary.selectedThumbnail()) {
                     hideThumbnail();
@@ -107,7 +113,7 @@ iD.MapillarySignLayer = function(context) {
             .style('display', enabled ? 'block' : 'none')
             .append('g')
             .attr('class', 'mapillary-sign-offset')
-            .attr('transform', 'translate(-15, -15)');  // center signs on loc
+            .attr('transform', 'translate(-16, -16)');  // center signs on loc
 
         if (enabled) {
             drawSigns();