diff --git a/debug/popup.html b/debug/popup.html
index 9cd27258731..e6f583447bd 100644
--- a/debug/popup.html
+++ b/debug/popup.html
@@ -25,6 +25,13 @@
     style: 'mapbox://styles/mapbox/streets-v10',
     hash: true
 });
+map.showPadding = true;
+map.setPadding({
+    left: 10,
+    right: 20,
+    top: 30,
+    bottom: 40
+});
 
 var popup = new mapboxgl.Popup({closeButton: false, closeOnClick: false})
     .trackPointer()
diff --git a/src/ui/popup.js b/src/ui/popup.js
index c040a7f9335..b61fe4b4b1b 100644
--- a/src/ui/popup.js
+++ b/src/ui/popup.js
@@ -555,10 +555,10 @@ export default class Popup extends Evented {
         const width = container.offsetWidth;
         const height = container.offsetHeight;
 
-        const isTop = pos.y + bottomY < height;
-        const isBottom = pos.y > map.transform.height - height;
-        const isLeft = pos.x < width / 2;
-        const isRight = pos.x > map.transform.width - width / 2;
+        const isTop = pos.y + bottomY < height + map.transform.padding.top;
+        const isBottom = pos.y > map.transform.height - height - map.transform.padding.bottom;
+        const isLeft = pos.x < width / 2 + map.transform.padding.left;
+        const isRight = pos.x > map.transform.width - width / 2 - map.transform.padding.right;
 
         if (isTop) {
             if (isLeft) return 'top-left';