Take into account image padding and image pixel ratio

src/render/image_atlas.js

@@ -9,6 +9,7 @@ import type ImageManager from './image_manager';
 import type Texture from './texture';
 
 const IMAGE_PADDING = 1;
+export {IMAGE_PADDING};
 
 type Rect = {
     x: number,

src/symbol/quads.js

@@ -7,6 +7,7 @@ import {GLYPH_PBF_BORDER} from '../style/parse_glyph_pbf';
 import type Anchor from './anchor';
 import type {PositionedIcon, Shaping} from './shaping';
 import {SHAPING_DEFAULT_OFFSET} from './shaping';
+import {IMAGE_PADDING} from '../render/image_atlas';
 import type SymbolStyleLayer from '../style/style_layer/symbol_style_layer';
 import type {Feature} from '../style-spec/expression';
 import type {StyleImage} from '../style/style_image';
@@ -55,7 +56,7 @@ export function getIconQuads(
     // If you have a 10px icon that isn't perfectly aligned to the pixel grid it will cover 11 actual
     // pixels. The quad needs to be padded to account for this, otherwise they'll look slightly clipped
     // on one edge in some cases.
-    const border = 1;
+    const border = IMAGE_PADDING;
 
     // Expand the box to respect the 1 pixel border in the atlas image. We're using `image.paddedRect - border`
     // instead of image.displaySize because we only pad with one pixel for retina images as well, and the
@@ -134,7 +135,7 @@ export function getGlyphQuads(anchor: Anchor,
                 const image = imageMap[positionedGlyph.imageName];
                 isSDF = image.sdf;
                 pixelRatio = image.pixelRatio;
-                rectBuffer = 0.0;
+                rectBuffer = IMAGE_PADDING / pixelRatio;
             }
 
             const glyphOffset = alongLine ?

src/symbol/shaping.js

@@ -14,6 +14,7 @@ import {warnOnce} from '../util/util';
 import type {StyleGlyph, GlyphMetrics} from '../style/style_glyph';
 import {GLYPH_PBF_BORDER} from '../style/parse_glyph_pbf';
 import type {ImagePosition} from '../render/image_atlas';
+import {IMAGE_PADDING} from '../render/image_atlas';
 import type {Rect, GlyphPosition} from '../render/glyph_atlas';
 import Formatted, {FormattedSection} from '../style-spec/expression/types/formatted';
 
@@ -638,7 +639,7 @@ function shapeLines(shaping: Shaping,
 
                 metrics = {width: size[0],
                     height: size[1],
-                    left: 0,
+                    left: IMAGE_PADDING,
                     top: -GLYPH_PBF_BORDER,
                     advance: vertical ? size[1] : size[0]};
 

test/expected/text-shaping-images-horizontal.json

@@ -83,7 +83,7 @@
           "metrics": {
             "width": 14,
             "height": 14,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 14
           },
@@ -106,7 +106,7 @@
           "metrics": {
             "width": 30,
             "height": 14,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 30
           },
@@ -134,7 +134,7 @@
           "metrics": {
             "width": 14,
             "height": 30,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 14
           },
@@ -157,7 +157,7 @@
           "metrics": {
             "width": 14,
             "height": 14,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 14
           },

test/expected/text-shaping-images-vertical.json

@@ -37,7 +37,7 @@
           "metrics": {
             "width": 14,
             "height": 14,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 14
           },
@@ -60,7 +60,7 @@
           "metrics": {
             "width": 30,
             "height": 14,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 14
           },
@@ -88,7 +88,7 @@
           "metrics": {
             "width": 14,
             "height": 30,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 30
           },
@@ -111,7 +111,7 @@
           "metrics": {
             "width": 14,
             "height": 14,
-            "left": 0,
+            "left": 1,
             "top": -3,
             "advance": 14
           },